Vue 3新引入的Suspense组件介绍

前言

Suspense是Vue 3新增的内置标签，尽管目前官方文档里并没有Suspense的介绍，但不妨碍我们先学习它。

每当我们希望组件等待数据获取时（通常在异步API调用中），我们都可以使用Vue3 Composition API制作异步组件。

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

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

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

但是现在，Suspense随Vue3内置了，因此我们不必担心跟踪何时加载数据并呈现相应的内容。

父组件

我们通过范例学习Suspense，首先编写一个父组件。