Vue.js中异步组件须用defineAsyncComponent声明并由Suspense包裹，其#default插槽放异步组件、#fallback插槽放静态占位内容，支持超时重试、骨架屏匹配及suspensible:false局部控制。
Vue.js 中异步组件与 Suspense 协作，本质是让加载过程“可感知、不割裂、结构一致”。关键不是写多少代码，而是把异步源头准确包裹，并用轻量静态的 fallback 内容承接过渡。
异步组件必须用 defineAsyncComponent 声明
不能直接在 setup() 里 await import()，否则会阻塞整个组件初始化。正确方式是用 defineAsyncComponent 包装导入逻辑：
const AsyncProfile = defineAsyncComponent(() => import('./Profile.vue'))- 可选配置超时、重试、错误组件等，例如
{ timeout: 3000, retry: 2 } - 若组件内部有
async setup()或顶层await，它也会被Suspense自动捕获为异步依赖
Suspense 必须包裹异步内容，且只认两个插槽
<Suspense> 是声明式协调器，不参与业务逻辑，只响应异步状态：
-
#default插槽放异步组件（如<AsyncProfile />），加载完成后才渲染 -
#fallback插槽放纯静态占位内容，比如文字提示、骨架屏或简单 div，它不会响应 re-render - 多个并列异步组件（如侧边栏 + 主区）会被自动聚合，统一等待，无需
Promise.all
骨架屏要“形似神稳”，别靠 v-for 动态生成
切换时跳动，多半因为骨架结构和真实 DOM 不匹配：
立即学习“前端免费学习笔记（深入）”；
- 用固定宽高或百分比模拟卡片、头像、段落，例如
width: 60%; height: 16px; - 背景用
linear-gradient模拟加载动画，避免图片或复杂样式 - 真实组件渲染 5 条列表，骨架屏就写 5 个静态
<div class="item-skeleton"></div>，不套v-for
多层级异步也能自然嵌套，但需注意控制权归属
Suspense 默认接管所有子级异步依赖，但可通过配置交还控制权：
- 父级
Suspense会等待其内部所有异步组件 + 异步 setup + 子组件的异步依赖 - 若某个异步组件想自己管理加载状态，定义时加
suspensible: false，它就不再受外层Suspense控制 - 嵌套多个
Suspense时，每个都独立作用于自己的子树，适合局部加载反馈
