请阐述 Vue 3 中 Suspense 组件的功能，并说明在异步组件处理中应当如何应用它？

回答思路

1. 【回答框架 1】Suspense 是 Vue 3 引入的用于协调异步依赖加载的内置组件，它允许组件在等待异步组件、异步 setup 函数或异步依赖解析时展示 fallback 内容，从而优化用户等待体验。
2. 【回答框架 2】使用方式：在 Suspense 组件内，通过 default 插槽放置异步组件或包含异步逻辑的组件，通过 fallback 插槽提供加载状态。例如，<Suspense><template #default><AsyncComponent /></template><template #fallback>Loading...</template></Suspense>。异步组件需使用 defineAsyncComponent 定义，或在 setup 中使用 await。
3. 【回答框架 3】Suspense 触发条件：当 default 插槽内的组件树中存在异步依赖时（如异步组件加载、setup 异步执行），Suspense 会等待其完成，期间渲染 fallback 内容；当所有异步依赖解析后，切换显示 default 内容。
4. 【回答框架 4】注意：Suspense 是实验性特性，在 Vue 3 中 API 可能变化，且要求异步组件必须是 Suspense 的直接子组件，或者其外层没有其他异步依赖的组件，以避免无法捕获异步事件。
5. 【关键点 1】Suspense 用于协调异步组件和异步 setup，提供加载占位。
6. 【关键点 2】使用 default 和 fallback 插槽分别定义内容与加载状态。
7. 【关键点 3】异步组件通过 defineAsyncComponent 定义，与 Suspense 配合使用。
8. 【关键点 4】Suspense 为实验特性，使用时应关注版本更新。
9. 【易错点 1】不能将 Suspense 与 v-if 联用不当，否则可能导致异步组件重复挂载。
10. 【易错点 2】Suspense 不保证捕获嵌套异步组件之外的异步操作（如路由懒加载），需确保异步依赖在组件树内。
11. 【易错点 3】在服务端渲染中，Suspense 的使用有限制，需注意兼容性。