Suspense组件用于在等待某个异步组件解析时显示后备内容。
你可能会想我们会在什么时候使用异步组件?
老实说,超出你的想象。每当我们希望组件等待数据获取时(通常在异步API调用中),我们都可以使用Vue3 Composition API制作异步组件。
以下是异步组件有用的一些实例:
- 在页面加载之前显示加载动画
- 显示占位符内容
- 处理延迟加载的图像
以前,在Vue2中,我们必须使用条件(例如 v-if 或 v-else)来检查我们的数据是否已加载并显示后备内容。
但是现在,Suspense随Vue3内置了,因此我们不必担心跟踪何时加载数据并呈现相应的内容。
组件


效果图

3秒之后显示

网友评论