Vue3 Suspense 组件

本文已整理到 Github，地址 blog。

如果我的内容帮助到了您，欢迎点个 Star 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

---

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

什么是 Suspense 组件？

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

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

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

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

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

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

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

如何使用 Suspense 组件？

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

• 带有 async setup() 钩子的组件。这包括使用

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

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

  • 将异步组件包装在