vue 3 异步组件依赖 suspense 统一协调加载状态，它递归收集插槽内所有异步行为（如 async setup、defineasynccomponent、useasyncdata），等待全部 resolve 后渲染，默认错误走 #fallback；组件内部用 async setup 提前获取数据，但 loadingcomponent 等配置被忽略，需通过 onerror 处理加载失败。
Vue 3 中异步组件处理内部异步依赖，核心靠两层机制协同：外层用 Suspense 统一协调加载状态，内层组件自身通过 async setup() 或组合式逻辑发起异步操作。关键不在于“谁来发请求”，而在于“谁来控制等待时机和展示逻辑”。
用 Suspense 包裹异步组件，自动聚合所有依赖
Suspense 不只等组件加载，它会递归收集 #default 插槽内整个组件树中的所有异步行为——包括 defineAsyncComponent 加载、async setup() 返回的 Promise、甚至子组件里调用的 useAsyncData 等。只要它们出现在 Suspense 的作用域内，就会被统一等待。
- 父级只需写一层 Suspense，无需在每个子组件里手动维护 loading 状态
- 多个子组件同时发起接口请求，Suspense 会等到全部 resolve 后才显示 #default 内容
- 如果某个子组件 setup 抛错或 Promise reject，整个 Suspense 会 fallback 到 #fallback 插槽
异步组件内部用 async setup() 做数据获取
defineAsyncComponent 定义的组件，在 setup 阶段就可以直接返回 Promise，Vue 会把它识别为异步依赖：
- 写法示例：export default defineComponent({ async setup() { const data = await api.fetchOrder(); return { data }; } });
- 这种写法比在 onMounted 里请求更早介入渲染流程，Suspense 能准确捕获等待时机
- 注意：不能在 async setup() 中使用 ref 或 reactive 直接包裹未 resolve 的值，应配合 suspense 指令或 v-if 控制渲染节奏
避免 Suspense 和组件自身加载配置冲突
当异步组件被 Suspense 包裹时，它的 loadingComponent、errorComponent、delay、timeout 等选项会被忽略——因为控制权已移交 Suspense。
- 若需自定义错误处理（比如重试），应在 onError 回调里做，而不是依赖 errorComponent
- 如确实需要组件独立控制加载态（例如弹窗中嵌套异步内容但不想影响主页面），可显式设置 suspensible: false
- 常见误用：既在外层加 Suspense，又在异步组件里配 loadingComponent，结果 fallback 不生效
配合 defineAsyncComponent 的健壮配置
即使有 Suspense，defineAsyncComponent 本身的容错能力仍不可少，尤其应对 chunk 加载失败：
- 务必配置 onError，用正则匹配 dynamically imported module|ChunkLoadError 做有限重试
- timeout 值要结合实际网络环境设定，5 秒在弱网下可能不够，建议设为 8000–12000
- delay 可保留默认 200ms，避免快速加载时 loading 闪烁
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
