Suspense 通过声明式结构整合加载逻辑，用结构一致的静态骨架屏替代白屏，自动聚合子树所有异步依赖，维持 PENDING/RESOLVED/REJECTED 清晰状态机，并配合无布局偏移的骨架屏提升感知速度。
通过 Suspense 实现更好的交互体验，关键不在于“等得更久”，而在于“等得更稳、看得更准、切得更顺”。它把原本分散在各处的加载逻辑收束为声明式结构，让骨架屏真正起作用，避免布局跳动和白屏焦虑。
用对插槽：#default 和 #fallback 各司其职
#default 插槽放真实内容（如异步组件、含 async setup 的组件），#fallback 放轻量静态占位——不是随便一个 loading 图标就行，而是要结构一致的骨架屏。Suspense 会确保 fallback 内容不触发重渲染，所以它必须是纯静态 DOM，不能含响应式数据或动态样式。比如视频列表有三张卡片，fallback 就该有三个尺寸匹配的灰色块；用户资料页有头像+昵称+简介，骨架屏也得保留对应位置和比例。
自动聚合所有异步依赖
Suspense 不只等组件加载，还会捕获子组件树里所有异步行为：defineAsyncComponent 的 import、setup 中返回 Promise 的逻辑、甚至嵌套子组件里的 useAsyncData 调用。它内部靠 pendingId 和 activeBranch 变量跟踪当前批次，只有全部 resolve 才切换状态。这意味着你不用写 Promise.all，也不用层层透传 loading 状态——父级 Suspense 一条指令，整棵子树的异步都归它管。
状态流转清晰可控
Suspense 在运行时维持三种核心状态：PENDING（初始等待）、RESOLVED（全部就绪）、REJECTED（某处出错）。它通过 isPending / isResolved 等标记实时反映当前阶段，渲染函数据此决定输出 fallback 还是 default。这种状态机设计杜绝了中间态闪烁，用户看到的永远是“确定可用”的画面。出错时，错误不会静默吞掉，而是可被捕获或交由上层错误边界处理。
配合骨架屏提升感知速度
骨架屏本身不加快网络请求，但它显著优化用户心理预期。用 background-gradient 模拟内容区块、固定宽高避免回流、保持 item 数量与真实列表一致——这些细节让内容“浮现”而非“弹出”。Suspense 让骨架屏从“手动开关”变成“自然过渡”，切换瞬间无 layout shift，用户视线无需重新定位，主观加载速度提升可达 30%。
