Vue Suspense 异步等待

掌握 Suspense 组件管理异步依赖的加载状态，提供优雅的 fallback 回退方案。 · 难度：入门 · +15XP

Suspense 概述

Vue 3 的 <Suspense> 是一个实验性组件，用于协调组件树中异步依赖（如异步组件、async setup()）的加载状态。它允许你定义加载中（fallback）和完成后的内容。

基础用法

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <p>加载中...</p>
  </template>
</Suspense>

异步组件配合

// 异步组件定义
const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
)

当 AsyncComponent 内部使用了 await 或 new Promise 时，Suspense 会等待所有异步操作完成后再渲染 default 插槽。

嵌套 Suspense

多个 Suspense 可以嵌套，内部 Suspense 的 fallback 不会触发外部 fallback。

练习提示

1. 创建一个异步组件，其 setup 函数中使用 await new Promise(resolve => setTimeout(resolve, 2000))。
2. 在 App 中用 Suspense 包裹，并提供一个 loading 动画。