<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

场景：

• 在加载多个组件时，其中一个组件可能会因为某些原因而需要较长的时间才能加载完成，这时候对其他组件的渲染造成了阻塞，造成了用户体验的下降。

异步组件

• 1. 带有异步 setup() 钩子的组件。这也包含了使用 <script setup> 时有顶层 await 表达式的组件。

export default {
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}
 //  或
<script setup>
  const res = await fetch(...)
  const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>

• 2. 使用异步组件

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    resolve(/* 获取到的组件 */)
  })
})
// ... 像使用其他一般组件一样使用 `AsyncComp`

• 接受一个对象类型，对异步函数进行配置

const AsyncCategory = defineAsyncComponent({ 
    loader: () => import("./components/AsyncCategory.vue"), // 加载 
    loadingComponent: Loading, // 占位组件 
    errorComponent: Loading, // 加载失败的时候显示的组件 
    delay: 2000, // 延迟加载（loadingComponent的延迟） 
    /** 
      * err: 错误信息， 
      * retry: 函数，调用retry尝试重新加载， 
      * attempts: 记录尝试次数 
    */ 
    onError: function (err, retry, attempts) { 
    } 
}) 

• 在初始渲染时，<Suspense> 将在内存中渲染其默认的插槽内容。如果在这个过程中遇到任何异步依赖，则会进入挂起状态。在挂起状态期间，展示的是后备内容。当所有遇到的异步依赖都完成后，<Suspense> 会进入完成状态，并将展示出默认插槽的内容。

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

• <Suspense> 和 <Transition>、<KeepAlive> 等组件结合

RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- 主要内容 -->
          <component :is="Component"></component>

          <!-- 加载中状态 -->
          <template #fallback>
            正在加载...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>