vue动态组件配合suspense实现骨架屏，通过defineasynccomponent封装异步组件并存入映射表，由动态切换，suspense自动管理加载状态并在#fallback中渲染结构匹配的骨架屏，零侵入、声明式。
Vue 动态组件配合异步组件实现骨架屏，核心在于用 <component :is></component> 控制组件切换，再通过 <suspense></suspense> 统一管理其异步加载状态，并在 #fallback 插槽中渲染结构一致的骨架屏。整个过程无需手动维护 loading 状态，也不用写 Promise.then，真正声明式、零侵入。
动态组件 + defineAsyncComponent 构建可切换的异步模块
先用 defineAsyncComponent 包装每个需懒加载的组件，支持错误处理和加载超时：
- 避免直接 import 同步引入，改用工厂函数或 import() 表达式
- 推荐写法：const AsyncPost = defineAsyncComponent(() => import('./views/Post.vue'))
- 可统一加 loading 延迟（防闪烁）：defineAsyncComponent({ loader: () => import('./Post.vue'), delay: 200 })
- 将多个异步组件对象存入一个映射表，供
:is动态绑定：const views = { post: AsyncPost, archive: AsyncArchive, about: AsyncAbout }
Suspense 封装动态组件，自动接管加载流程
<suspense></suspense> 必须包裹所有含异步 setup 或异步组件的节点。它会自动等待内部所有异步依赖（包括 :is 切换后新加载的组件）完成：
- 把
<component :is="currentView"></component>放进#default插槽 -
#fallback中放 Skeleton 组件，样式需与目标组件 DOM 结构对齐（如头像宽高、段落行数、间距等） - 注意：Suspense 不监听 props 变化，只响应组件实例创建；所以切换
currentView会触发新异步组件加载，Suspense 自动捕获
骨架屏组件需结构匹配，避免布局跳动
骨架屏不是装饰，而是“占位器”。它的 DOM 节点结构、盒模型（padding/margin/line-height）、甚至字体大小，都应与真实组件保持一致：
- 例如真实组件有
<img class="avatar">，骨架屏就用<div class="skeleton-avatar"> 占位 <li>文字区块建议用多行 <code><div class="skeleton-line"> 模拟段落，而非单个灰色块 <li>CSS 推荐用 <code>background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)+animation实现流动感 - 可复用同一套骨架组件，通过
props控制显示几行、是否有头像等变体 - 添加
@error事件监听，捕获异步加载失败，并展示友好提示或重试按钮 - 搭配
defineAsyncComponent的errorComponent选项，单独定义错误界面 - 为防止快速切换导致骨架屏频繁闪现，可在 Suspense 外层加
v-if="!isRapidSwitching"临时抑制，或用delay+timeout平衡体验与反馈及时性 - 若骨架屏本身也需异步加载（如 SSR 场景），可用
await import('./Skeleton.vue')包裹，确保 fallback 内容也按需加载
边界情况处理：错误回退与加载延迟优化
Suspense 默认不处理错误，需主动增强健壮性：
