Vue 3 中用 <Suspense> 包裹异步组件并配合 #fallback 插槽注入结构匹配的骨架屏，可实现无布局跳动的平滑过渡；它自动协调嵌套异步依赖，支持超时/错误控制，并需规避图片加载与服务端延迟等常见陷阱。
Vue 3 中用 <Suspense> 包裹异步组件，再通过 #fallback 插槽注入骨架屏，就能实现视觉平滑过渡——骨架屏占位、结构不变、无布局跳动，用户感知更“快”。
用 Suspense + 异步组件自动接管加载状态
<Suspense> 是 Vue 3 内置的声明式异步协调器。它会自动捕获子组件内的异步行为（比如 defineAsyncComponent 或 async setup()），无需手动维护 loading 变量。
- 只要子组件是异步导入的，
<Suspense>就会暂停渲染#default，转而显示#fallback - 所有嵌套层级的异步依赖（如子组件也含
await）会被聚合等待，避免局部闪动 - 超时、错误、延迟展示等行为可通过
defineAsyncComponent的配置项精细控制
骨架屏要匹配真实内容的结构
骨架屏不是通用 loading 动画，而是对应页面区块的“轮廓占位”。例如用户卡片页的骨架应包含头像区、标题行、描述段落等，宽度/高度/圆角需与真实 DOM 一致。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 推荐将骨架屏拆成可复用的原子组件（如
SkeletonAvatar、SkeletonText），按需组合 - 使用
animate-pulse类或 CSS 动画模拟“呼吸感”，但避免过度闪烁影响阅读 - 深色模式下注意背景灰阶适配（如
bg-gray-200→bg-gray-700）
避免常见陷阱：状态误判与资源竞争
骨架屏失效往往不是写法错，而是逻辑时机没对齐。两个高频问题需主动规避：
立即学习“前端免费学习笔记（深入）”；
- 图片加载独立于组件异步逻辑：单张图片用
@load+ 独立ref(true/false)控制，不能共用 Suspense 的全局加载态 - 服务端返回慢但骨架已渲染完成：可在
#fallback中加v-show配合计时器，确保至少展示 300ms，防止“一闪而过”
进阶：路由级与模块级骨架分层控制
大型应用中，不同场景适合不同粒度的骨架策略：
- 路由切换：在
<router-view>外层套<Suspense>，搭配页面级骨架组件（如DashboardSkeleton） - 数据区块：对
async setup()获取列表的组件单独包裹<Suspense>，只骨架化该区域 - 后台系统常用
el-skeleton（Element Plus）快速占位，或封装带行数、动画开关的<ElSkeleton rows="5" :animated="true">
