Vue3 Suspense 怎么优雅处理异步组件加载？

Question

仓乃文 · Accepted Answer

异步组件加载时需要显示 loading 状态，传统方式用 v-if 手动控制很繁琐。Suspense 自动检测子组件的异步状态，加载中显示 #fallback 插槽，加载完成显示默认插槽。基础用法： ```html ``` 配合 async setup： ```javascript // AsyncComponent.vue export default { async setup() { const data = await fetchData(); // Suspense 会等待这个 Promise return { data }; } }; ``` 配合事件处理： ```javascript const SuspenseWrapper = { setup(_, { slots }) { const onError = (err) => console.error(err); const onResolve = () => console.log("loaded"); return () => h(Suspense, { onError, onResolve }, slots); } }; ``` 补充说明： - Suspense 等待所有子组件的 async setup 完成后才显示默认插槽 - onError 捕获子组件异步错误，onResolve 在加载完成时触发 - Suspense 可以嵌套，外层等待外层，内层等待内层 - 配合 defineAsyncComponent 使用：() => import("./Heavy.vue") - 目前 Suspense 仍是实验性功能，API 可能变化