1、Suspense作用

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

2、使用步骤

使用步骤：
异步引入组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
使用Suspense包裹组件，并配置好default 与 fallback
<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>加载中.....</h3></template></Suspense></div>
</template>
其中 fallback是由于网速或者其他原因没有加载成功时显示的组件，当加载成功后显示default（default 与 fallback 不可改名，因为Suspense相当于定义好的slot具名插槽）

3、 `Suspense搭配`async函数的setup

代码：

App.vue（异步加载组件的父组件）

<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child /></template><template v-slot:fallback><h3>稍等，加载中...</h3></template></Suspense></div>
</template><script>
// import Child from './components/Child'//静态引入
import { defineAsyncComponent } from "vue";
const Child = defineAsyncComponent(() => import("./components/Child")); //异步引入
export default {name: "App",components: { Child },
};
</script><style>
.app {background-color: gray;padding: 10px;
}
</style>

定义setup为async的组件Child.vue

<template><div class="child"><h3>我是Child组件</h3>{{ sum }}</div>
</template><script>
import { ref } from "vue";
export default {name: "Child",async setup() {let sum = ref(0);let p = new Promise((resolve) => {setTimeout(() => {resolve({ sum });}, 3000);});return await p;},
};
</script><style>
.child {background-color: skyblue;padding: 10px;
}
</style>

结果分析：