NUXT3 LazyFetch

【问题标题】：NUXT3 LazyFetchNUXT3 LazyFetch
【发布时间】：2022-10-24 18:04:33
【问题描述】：

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

现在，此请求会阻止整个页面加载，并在来自 API 的数据准备好 3 秒后呈现。我尝试使用 Nuxt3 来使用 LazyFetch，但它并没有像我想象的那样工作。

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

【问题讨论】：

标签： vue.js fetch nuxt.js lazy-evaluation

【解决方案1】：

当您不希望渲染被阻止时，您可以使用已安装的生命周期。

这在第一次渲染之后运行。您还可以使用函数加载数据并将其分配给反应变量。

<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>

【讨论】：