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

骨架屏控制逻辑复用的核心,是把“加载状态管理”从组件内部抽离成可跨组件共享的组合式函数(Composable),而不是在每个页面重复写 v-if="loading" 或手动维护 ref。
用 useSkeleton 管理通用加载状态
创建一个 useSkeleton.ts 组合式函数,封装骨架屏最基础的状态与行为:
- 接收一个响应式布尔值(如
isLoading)或异步操作函数(如fetchData)作为输入 - 返回
isSkeletonVisible(响应式 ref),供模板直接绑定v-if - 支持自动清理:当组件卸载时,避免状态残留影响后续渲染
- 可选扩展:内置防抖、延迟显示(防止闪动)、加载超时 fallback
为不同业务场景定制 useXxxSkeleton
单一 useSkeleton 不足以覆盖复杂需求。应按模块分层封装:

