suspense 组件是 vue3 新增的内置组件之一。它允许我们的应用程序在等待异步组件的同时渲染一些备用内容，让我们创造一个流畅的用户体验。

什么是 suspense 组件？

suspense 组件用于在等待某种异步组件解析时显示回退内容。

您可能会想，我们什么时候会使用异步组件？

老实说，比你想象的要多。每当我们希望我们的组件等待它获取数据（通常是在异步 API 调用中）时，我们可以使用 vue3 composition API 创建一个异步组件。

以下是一些异步组件有用的实例：

• 在加载页面之前显示加载动画
• 显示占位符内容
• 处理延迟加载的图像
• etc

以前，在 vue2 中，我们必须使用条件（例如 v-if 或 v-else）来检查数据是否已加载并显示回退内容。

但是现在，vue3 内置了 suspense，所以我们不必担心数据加载时的跟踪和相应内容的渲染。

如何使用 suspense组件？

有两种类型的异步依赖可以等待 <suspense>：

带有 async setup() 钩子的组件。这包括使用 <script setup> 顶级 await 表达式的组件。 异步组件。

对于异步组件，你可以看看之前写过的一篇 Vue3 中使用 defineAsyncComponent 延迟加载组件。

例如，我们有一个 TodoInfo 组件，其中使用了 <script setup>，该组件在完全渲染前异步加载一些数据。

<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
const getTodoInfo = async () => {
  return await fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => json)
}

var { title } = await getTodoInfo()
</script>

然后，我们有一个 todoList.vue 组件，其中包含 TodoInfo 组件。

如果我们要在等待组件获取数据并解析时显示 Loading... 之类的内容，只需要三步：

• 将异步组件包装在 <template #default> 标签中
• 在异步组件旁边添加一个同级的 <template #fallback> 标签
• 将两个组件包装在 <Suspence> 组件中

使用插槽，suspense将渲染备用内容，直到默认内容准备就绪为止。然后，它会自动切换到显示我们的异步组件。

它看起来有点像这样。

<suspense>
  <template #default>
    <todo-info/>
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</suspense>

您还可以捕获组件错误

当我们使用异步组件时，我们还可以捕获错误并向用户显示一些错误消息。

在 vue2 中，我们可以使用 errorCaptured 钩子，但是在 Vue3 中，它已重命名为 onErrorCaptured。

不管它被命名为什么，当任何子代组件的错误被捕获时，这个钩子就会运行。我们可以在 suspense中使用这个来渲染出错时的错误。

如果我们处理错误以显示错误消息，那么上面的组件就是这样的。

<template>
  <div v-if="errMsg"> {{ errMsg }} </div>
  <suspense  v-else>
    <template #default>
      <todo-info/>
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </suspense >
</template>

<script setup>
import { onErrorCaptured } from 'vue'

const errMsg = ref(null)
onErrorCaptured(e => {
  errMsg.value = '出错了!'
  return true
})
</script>