* 它允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。 **1. 异步组件`LearnSuspense.vue`** ```html <template> <h2>异步组件</h2> <h3>{{ msg }}</h3> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'LearnSuspense', setup() { //等到2000ms后才返回数据 return new Promise((resolve, reject) => { setTimeout(() => { resolve({ msg: 'Hello World!', }) }, 2000) }) }, }) </script> ``` **2. App.vue** ```html <template> <Suspense> <!-- 异步组件 --> <template #default> <LearnSuspense /> </template> <!-- 当异步组件LearnSuspense还没有渲染完成之前，先显示这里。当异步组件LearnSuspense完成渲染之后，则显示异步组件，隐藏这里--> <template v-slot:fallback> <h2>Loading</h2> </template> </Suspense> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import LearnSuspense from './components/LearnSuspense.vue' export default defineComponent({ components: { LearnSuspense }, }) </script> ``` 效果如下，因为异步组件 LearnSuspense 需要等待 2000ms 才渲染完成，在此之前，先显示`Loading`，当异步组件 LearnSuspense 渲染完成后自动隐藏`Loading`并显示异步组件。