Suspense 通过声明式包装统一控制异步等待，仅对子树中触发 Promise 的节点（如 defineAsyncComponent、顶层 await、async setup）生效，需精准包裹、配合理想骨架屏 fallback、防闪烁延迟及错误超时处理。
用 Suspense 处理异步依赖，核心是把“等待过程”从组件内部抽离出来，交由声明式包装统一控制——它不关心你加载的是组件、数据还是嵌套的异步 setup，只专注一件事：等齐了再渲染，没齐就展示 fallback。
明确包裹范围：只包真正异步的部分
Suspense 不是全局加载器，它只对子树中触发 Promise 的节点起作用。常见有效源头包括：
- defineAsyncComponent 定义的动态导入组件
- <script setup> 中顶层 await（如 await import('./Chart.vue') 或 await api.getUser()）
- setup() 返回 Promise 的组合式组件（含 async setup）
注意：普通 ref 或 reactive 状态变化、同步计算逻辑不会被 Suspense 捕获。别把它当 loading 全局开关用，否则 fallback 可能永不出现或误触发。
合理设计 fallback：骨架屏比文字更稳
#fallback 插槽内容应轻量、静态、结构一致：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用固定宽高 div 模拟卡片、头像、段落区域，避免 flex/wrap 导致布局偏移
- 背景推荐 linear-gradient 模拟加载动画，不依赖图片或字体加载
- 若真实内容有 5 条列表项，fallback 也保持 5 个占位块，不用 v-for 动态生成
- 不建议在 fallback 中放复杂逻辑或响应式状态，它不会随 data 变化重渲染
应对短时加载：加延迟防闪烁
加载很快（比如 200ms 内完成）时直接显示 fallback 反而造成视觉干扰。可加简单防抖：
- 在 #fallback 外层套一层 v-if="showFallback"，配合 setTimeout 控制显隐时机
- Vue 官方推荐 delay 属性（仅 defineAsyncComponent 支持），但 Suspense 本身不提供 delay，需手动处理
- 典型做法：onMounted 启动计时器，300ms 后设 showFallback = true；若组件提前 resolve，则 clearTimeout 并跳过显示
错误与超时不能忽略
Suspense 默认不捕获 Promise reject，错误会冒泡到 nearest error boundary 或中断渲染：
- 在 defineAsyncComponent 配置中启用 errorComponent 和 onError 回调，支持自动重试
- 搭配 <ErrorBoundary>（React）或 onerrorCaptured（Vue）做兜底，避免白屏
- 对超时敏感场景，可在异步逻辑中主动 throw new Error('timeout')，并配合 timeout 配置统一处理
不复杂但容易忽略。关键不在技术多难，而在于骨架屏是否贴合真实结构、Suspense 是否准确包裹了所有异步源头。
