Vue 3 中顶级 `await` 导致模板不渲染：原因、解决办法和最佳实践

vue.js

2024-03-16 16:48:05

Vue 中顶级 await 导致模板不渲染：原因及解决方案

什么是顶级 `await`？

在 Vue 3 中，await 语法允许我们在 JavaScript 代码中异步等待数据。但是，当在组件的最顶层使用 await 时，会产生一个问题，即模板无法渲染。

问题原因

顶级 await 会挂起组件的渲染过程，直到异步数据获取完成。如果数据获取时间过长，模板可能会在数据就绪之前渲染，导致出现空白页面。

解决方法

有多种方法可以解决此问题：

1. Suspense 组件

Suspense 组件是一个高级组件，它允许我们在等待异步数据时显示替代组件。它可以包裹整个模板或其一部分，以便在数据准备好时进行动态渲染。

2. 手动处理数据获取

我们可以将异步数据获取逻辑移出 setup() 函数，并使用生命周期钩子手动处理。例如，可以在 onMounted() 钩子中调用 API 获取数据。

3. useAsyncData() 组合函数

Vue 3 提供了 useAsyncData() 组合函数，它可以自动处理异步数据获取。它将异步数据注入到组件中，并提供一个 loading 状态，表示数据仍在加载。

最佳实践

优先使用 Suspense 组件，因为它提供了更优雅的用户体验。
仅在必要时使用手动数据获取或 useAsyncData()。
确保异步数据获取时间尽可能短，以避免长时间等待。

实际示例

以下是如何使用 Suspense 组件解决此问题：

<template>
  <Suspense>
    <template v-slot:default>
      <!-- 正常渲染的模板 -->
    </template>
    <template v-slot:fallback>
      <!-- 等待数据时的替代组件 -->
    </template>
  </Suspense>
</template>

<script>
import { apiGetInventory } from '@/api'

const inventory = await apiGetInventory()
</script>