Vue 3 中 Suspense 统一处理异步加载的核心是用边界代替分散控制：异步组件必须为 Suspense 的直接子级，否则无法捕获；支持 defineAsyncComponent、顶层 await 和 async setup 三种异步来源；fallback 应保持布局稳定，错误需单独处理。
Vue 3 中异步组件结合 Suspense 统一处理加载状态，核心在于**用边界代替分散控制**：把多个异步依赖收束到一个 <suspense></suspense> 容器内，由它自动聚合等待、统一展示 fallback，避免每个组件各自维护 loading 状态。
异步组件必须是 Suspense 的直接子级
这是最关键的约束。Suspense 只能检测并等待其 #default 插槽的**直接子组件**中的异步行为。如果中间嵌套了一层普通组件，异步逻辑就会“逃逸”，Suspense 将无法感知。
- ✅ 正确写法：异步组件作为
<suspense></suspense>的一级子元素 - ❌ 错误写法：
<suspense><wrapper><asyncchild></asyncchild></wrapper></suspense>—— Wrapper 是同步组件，Suspense 看不到 AsyncChild 的异步状态 - 若需包装，Wrapper 本身也需声明为异步（例如用
async setup()或顶层await），才能被 Suspense 捕获
三种常见异步来源，Suspense 都能等
Suspense 不区分异步来自哪里，只要出现在 #default 插槽的直接子树中，它就一并等待：
-
defineAsyncComponent：最常用，比如
const Chart = defineAsyncComponent(() => import('./Chart.vue')) -
顶层 await：在
<script setup></script>中直接await一个 Promise（如模拟数据请求或延迟） - async setup()：setup 函数返回 Promise，内部有异步操作
三者可混合共存——一个 <suspense></suspense> 内同时放一个懒加载图表 + 一个带顶层 await 的用户信息组件，它会等到两者都 resolve 后才切换内容。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
fallback 插槽要合理设计，避免闪烁或布局塌陷
fallback 不只是“显示 loading 文字”，它的 DOM 结构应尽量匹配真实内容的占位尺寸，否则会出现视觉跳动。
- 推荐使用骨架屏（Skeleton）替代纯文字或 spinner，保持容器高度/宽度一致
- 避免在 fallback 中写复杂逻辑或大量 DOM；它只应是轻量、静态的占位 UI
- 慎用
delay：defineAsyncComponent支持delay: 200，防止快速加载时 fallback 一闪而过；但 Suspense 本身不提供 delay，需靠异步组件自身控制
错误处理不能只靠 Suspense
Suspense 只管“等待完成”，不处理失败。异步组件加载出错（如网络中断、chunk 404）时，它不会自动切到 error 状态，而是保持 fallback 或抛出未捕获异常。
- 必须为
defineAsyncComponent显式配置errorComponent - 顶层 await 抛错时，可配合
<errorboundary></errorboundary>（需自行实现或用第三方）捕获 - 不建议在 fallback 插槽里放重试按钮——它属于加载中状态，不是错误态；重试逻辑应放在 errorComponent 中
