* 它允許我們的應用程序在等待異步組件時渲染一些后備內容，可以讓我們創建一個平滑的用戶體驗。 **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`并顯示異步組件。