suspense会自动聚合多级异步依赖并统一等待全部完成后再渲染default内容，其核心机制是追踪setup中await、defineasynccomponent及顶层promise，而非逐层触发；嵌套suspense可实现各层级独立加载反馈。
Suspense 在多级异步嵌套中会自动聚合所有异步依赖，无需手动控制加载状态。它不是“逐层触发”，而是统一等待整棵树里所有异步操作完成后再切换内容——这是它的核心机制，也是和传统 loading 状态管理最本质的区别。
多级异步嵌套的常见结构
比如一个页面包含：路由组件（异步导入）→ 内部渲染 AsyncUserCard（异步组件）→ UserCard 中 setup() 里调用 fetchUser()（返回 Promise）→ 这个 Promise 又依赖另一个 async 函数 getAvatar()。四层异步，但 Suspense 不关心层数，只关心“是否全部 resolve”。
- 只要任意一层存在未完成的 Promise（包括 defineAsyncComponent 的 import、async setup()、await 表达式、组合式函数中返回的 Promise），Suspense 就保持在 fallback 状态
- 所有 Promise 都 settled（fulfilled 或 rejected）后，才渲染 default 插槽内容
- 即使子组件内部用了多个 await、嵌套 Promise.all，Suspense 仍能自动捕获并等待
确保正确触发的关键条件
不是写了 async 就一定被 Suspense 捕获——必须满足 Vue 的响应式上下文约束：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章