NUXT3 LazyFetch

Question

我有一个主页(页眉、内容、页脚)。在内容中，我需要显示来自API请求的一些数据，这些数据花费的时间太长。(例如，3秒)。

现在，此请求阻止整个页面加载，并在API的数据准备就绪后3秒后呈现。我尝试过使用Nuxt3来使用LazyFetch，但是它不像我想的那样工作。

是否可以先呈现页眉、页脚，然后在API数据准备好时显示内容？(但自动地，没有按钮或类似的.)我需要页面的第一个渲染尽可能快。

Answer 1

当您不想阻止呈现时，您可以使用onMounted生命周期。

这将在第一个呈现之后运行。还可以使用函数加载数据并将其分配给反应性变量。

<script setup>
const data = ref(null)

const loadData = async () => {
  data.value = await loadSomeData()
}

onMounted(() => {
  loadData()
})
</script>

在模板中使用

<div v-if="data">
  Data is loaded
</div>
<div v-else>
  Loading...
</div>