Vue3异步组件Suspense怎么使用

今天小编给大家分享一下Vue3异步组件Suspense怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

专注于为中小企业提供网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业临安免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

Suspense组件

官网中有提到他是属于实验性功能：
是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。
是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

意思就是此组件用来等待异步组件时渲染一些额外内容，让应用有更好的用户体验

要了解 所解决的问题和它是如何与异步依赖进行交互的，我们需要想象这样一种组件层级结构：

└─ 
   ├─ 
   │  └─ （组件有异步的 setup()）
   └─ 
      ├─  （异步组件）
      └─ （异步组件）

在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。如果没有 ，则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载态，在不同的时间显示出内容。

有了 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。

接下来看个简单的例子：

首先需要引入异步组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

简洁一些就是用组件实现异步的加载的这么一个效果

Home父组件代码如下：

      
        
Loading...