Suspense组件是Vue3中的知名功能之一。
它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。
值得庆幸的是，Suspense组件非常容易理解，它们甚至不需要任何额外的导入!
可以解决异步请求的困境； Suspense是Vue3推出的一个内置的特殊组件； 如果使用Suspense,需要返回一个Promise
本文主要是展示一哈加载多个异步组件的场景，遇到不稳定问题，及解决方法（加载单个，只需要引入单个组件即可）
创建第一个组件：
AsyncShow
<!--
* @Description: Suspense - 异步请求好帮手
* @Author: Rulyc
* @Operating:
-->
<template><h1>{{ result }}</h1>
</template><script lang="ts">import { defineComponent } from 'vue'export default defineComponent({name: "10_AsyncShow",setup() {/** 需要返回一个Promise, 使用Suspense */return new Promise((resolve) => {setTimeout(()=>{return resolve({result: 42})}, 3000)})}})
</script>
使用 async await , 新建一个 10_AsyncShow_Img组件
<template><img :src="result && result.url" alt="">
</template><script lang="ts">import { defineComponent } from 'vue'import axios from 'axios'export default defineComponent({name: "10_AsyncShow",async setup() {const rawData = await axios.get('https://images.dog.ceo/breeds/terrier-irish/n02093991_4404.jpg')return {result: rawData.config}}})
</script>
app中：（自行引入两个组件，然后使用如下图中）
警告中说：是一个实验性的特性，它的API很可能会改变slots，除非只有一个根节点。在
故而这里目前应该暂时展示一个根节点（之前的版本中，是可以展示多个异步组件作为根节点的； 以后版本未确定，还不够稳定）
解决这个问题，初步采用了增加一个div包裹（即增加一个根节点）
<Suspense><template #default><div><AsyncShow></AsyncShow><AsyncShowImg></AsyncShowImg></div></template><template #fallback><div>Loading... ---- 异步加载中</div></template>
</Suspense>
在4.5.8版本中，是需要增加一个根节点的。目前博主使用的是4.5.8； 之前的版本貌似是不用增加一个根节点。
补充：
单个组件及template上属性说明如下图：
