骨架屏控制逻辑复用的核心是将加载状态管理抽离为可共享的组合式函数useSkeleton，支持响应式绑定、自动清理及防抖延迟等扩展，并按场景分层封装useListSkeleton等函数，配合Suspense与统一UI组件实现主题适配。

骨架屏控制逻辑复用的核心，是把“加载状态管理”从组件内部抽离成可跨组件共享的组合式函数（Composable），而不是在每个页面重复写 v-if="loading" 或手动维护 ref。

用 useSkeleton 管理通用加载状态

创建一个 useSkeleton.ts 组合式函数，封装骨架屏最基础的状态与行为：

• 接收一个响应式布尔值（如 isLoading）或异步操作函数（如 fetchData）作为输入
• 返回 isSkeletonVisible（响应式 ref），供模板直接绑定 v-if
• 支持自动清理：当组件卸载时，避免状态残留影响后续渲染
• 可选扩展：内置防抖、延迟显示（防止闪动）、加载超时 fallback

为不同业务场景定制 useXxxSkeleton

单一 useSkeleton 不足以覆盖复杂需求。应按模块分层封装：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• useListSkeleton()：适配表格/列表页，返回 rows: number 和 hasHeader: boolean，方便对接 <el-skeleton :rows>
• useCardSkeleton()：针对卡片组件，自动监听图片 @load 事件，确保骨架屏不因初始 undefined 提前消失
• useFormSkeleton()：模拟表单字段结构，支持动态字段数和 label/placeholder 占位

配合 Suspense 实现声明式骨架过渡

对异步组件（如路由级页面），直接用 <Suspense> + fallback 是最轻量的复用方式：

立即学习“前端免费学习笔记（深入）”；

• 无需手动维护 loading 状态，Vue 自动接管组件挂载前的等待期
• fallback 中可复用已封装好的 <UiSkeleton /> 组件，实现 UI 层统一
• 与组合式函数不冲突：可在 setup() 内调用 useSkeleton() 做细粒度控制（如局部表格加载）

统一骨架屏 UI 组件 + 主题适配

逻辑复用必须搭配 UI 复用才完整：

• 所有 useXxxSkeleton 函数默认返回相同结构的响应式对象，例如 { visible, props }，其中 props 包含 rows、animated、loadingColor 等
• <UiSkeleton> 组件通过 v-bind="props" 接收配置，自动适配 Element Plus 的 <el-skeleton> 或自定义骨架结构
• 颜色、动画、圆角等通过 CSS 变量注入，与项目主题色联动，避免硬编码