Suspense

Suspense组件用于在等待某个异步组件解析时显示后备内容。

你可能会想我们会在什么时候使用异步组件?

老实说,超出你的想象。每当我们希望组件等待数据获取时(通常在异步API调用中),我们都可以使用Vue3 Composition API制作异步组件。

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

  • 在页面加载之前显示加载动画
  • 显示占位符内容
  • 处理延迟加载的图像
    以前,在Vue2中,我们必须使用条件(例如 v-if 或 v-else)来检查我们的数据是否已加载并显示后备内容。

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

组件

image.png
image.png

效果图

image.png

3秒之后显示


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 Suspense是Vue 3新增的内置标签,尽管目前官方文档里并没有Suspense的介绍,但不妨碍我们先学...
    microkof阅读 10,698评论 0 5
  • 前几天看了一篇讲react suspense的文章,挺有趣的;所以翻了一下 vue 相关的实现,结果 Vue2 并...
    anOnion阅读 7,005评论 0 2
  • 在vue3中新加了一个组件叫 ,其作用是当你在进行一个异步加载时,可以先提供一些静态组件作为显示内容,然后当异步...
    Ying0223阅读 7,292评论 0 0
  • 在Vue3中生命周期函数调用一步请求,组件的外部必须使用Suspense标签进行嵌套以等待异步方式的结束,可以进行...
    Viewwei阅读 2,707评论 0 0
  • 一些概念 Vue Composition API(VCA) 在实现上也其实只是把 Vue 本身就有的响应式系统更显...
    前端精阅读 12,168评论 0 23