Vue 3 中异步组件需用 defineAsyncComponent 创建并配合 <Suspense> 使用，后者自动等待组件加载和 async setup 完成；fallback 推荐骨架屏而非纯文字或 spinner；必须严格提供 #default 和 #fallback 插槽。
Vue 3 的 script setup 中处理异步组件，核心是两件事：定义异步组件 + 用 <Suspense> 统一接管加载状态。它不依赖手动维护 loading 变量，而是靠 Vue 内部的异步边界机制自动协调——只要子组件在加载或 setup 还没 resolve，<Suspense> 就一直显示 fallback。
怎么定义一个可被 Suspense 感知的异步组件
必须通过 defineAsyncComponent 创建，不能直接 import 后使用。因为只有它会返回一个“懒加载 Promise”，<Suspense> 才能监听其 pending 状态。
- 基础写法：
const AsyncProfile = defineAsyncComponent(() => import('./Profile.vue')) - 带加载/错误控制（可选）：
defineAsyncComponent({ loader: () => import('./Profile.vue'), loadingComponent: Loading, errorComponent: ErrorView, delay: 200 })—— 注意：这些配置只影响组件自身加载过程，<Suspense>的 fallback 仍会优先生效 - 不要写成
import Profile from './Profile.vue'，否则 Suspense 完全感知不到异步性
async setup 怎么和 Suspense 协同工作
当子组件的 setup 是 async 函数时，它本身就会返回 Promise。Suspense 能直接等待这个 Promise 完成，等同于“等数据请求完再渲染”。这时你甚至不需要在子组件里写 loading 状态。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 子组件示例：
<script setup lang="ts"> const user = await fetch('/api/user').then(r => r.json()) </script> - 父组件只需包裹：
<Suspense><UserProfile /><template #fallback><Skeleton /></template></Suspense> - 关键点：Suspense 会同时等待组件代码加载（import）+ async setup 执行完成，两者都 ok 才展示 default 插槽
fallback 插槽该放什么才更自然
别只写“加载中”文字。Suspense 的 fallback 是用户看到的第一屏，直接影响体验预期。
立即学习“前端免费学习笔记（深入）”；
- 推荐骨架屏（Skeleton）：用灰色块模拟真实布局，避免内容闪跳。比如头像位置放圆角矩形、标题放长条、简介放两行短横线
- 避免纯 spinner 或空白：容易让用户误判页面卡死
- 可以加简单动画：如
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)配合background-size: 200% 200%实现流动感
常见踩坑提醒
-
<Suspense>必须有且仅有两个命名插槽：#default和#fallback，多一个空 div 或注释都会报错 - async setup 中不能用
await在顶层之外的地方“断开”逻辑链，比如onMounted(async () => { await api() })不会被 Suspense 等待 - 如果子组件内部还有异步操作（如点击后才拉数据），那不属于 Suspense 管理范围，需自行处理 loading
- Suspense 目前仍是实验性特性，API 稳定性以 Vue 官方最新文档为准
