★ ★ ★ ★ ★

什么是 Suspense 组件？它是如何实现的？

⚡ 速记答案（30 秒）

专门用来等待异步依赖（异步组件 / async setup）的"占位壳"。子树中有返回 Promise 的组件时，先渲染 fallback 插槽，待全部 resolve 后渲染 default。

📖 详细讲解

标准面试回答（推荐记住）

Suspense 是 Vue 3 内置组件，用于处理异步依赖。当子组件有 async setup 或使用 defineAsyncComponent 时，Suspense 会先显示 fallback 插槽内容，等所有异步操作完成后再切换到 default 插槽。它可以嵌套使用，整个过程与响应式系统打通。

Suspense 工作机制

触发条件：
• 子组件使用 async setup()
• 使用 defineAsyncComponent 定义的异步组件
• 子树中存在返回 Promise 的组件

两个插槽：
• #default - 异步完成后显示的内容
• #fallback - 等待期间显示的加载状态

事件钩子

<Suspense
  @pending="onPending"
  @resolve="onResolve"
  @fallback="onFallback"
>
  ...
</Suspense>

注意事项

• Suspense 仍是实验性功能
• 嵌套 Suspense 时，内层的 pending 状态会冒泡到外层
• 配合 ErrorBoundary 处理异步错误

✅ 面试要点

•理解 Suspense 解决的问题场景
•知道 fallback 和 default 插槽的作用
•了解与 async setup 的配合使用

💻 代码示例

Suspense 基础用法

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script setup>
// 异步组件会被 Suspense 捕获
const AsyncComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)
</script>