LoadingWrapper组件通过插槽封装加载状态，支持default/loading/empty/error具名插槽，结合useAsyncData组合式函数统一管理异步逻辑，避免重复代码与副作用误触发。
用插槽封装 Loading 状态，核心是把“加载中”逻辑抽离成可复用组件，同时保留子内容的灵活性——插槽让业务组件专注渲染，Loading 交由容器控制。
用插槽承载真实内容，Loading 状态独立控制
创建一个 LoadingWrapper 组件，接收 loading 布尔值作为 prop，内部用 v-if 控制是否显示骨架屏或 loading 图标，其余区域通过 <slot></slot> 渲染传入的内容：
- 当
loading=true，只显示加载态（如<div class="skeleton"></div>或第三方 loading 组件） - 当
loading=false，直接透传并渲染默认插槽内容 - 不强制要求子组件配合，任何已有组件都能被包裹，零侵入
支持多插槽：区分加载态、空状态、错误态
进阶场景下，可扩展具名插槽提升表现力：
-
default：正常数据内容 -
loading：自定义加载 UI（比如带文字的 spinner） -
empty：数据为空时展示（如“暂无内容”图标） -
error：错误态重试入口（含@click触发刷新）
父组件按需传入对应插槽，LoadingWrapper 根据内部状态（loading/error/isEmpty）动态切换，逻辑清晰、扩展性强。
结合 Composition API 封装加载逻辑（推荐 Vue 3）
在业务组件中，把请求 + 加载状态管理抽成组合式函数，例如 useAsyncData：
- 返回
loading、data、error、refresh等响应式状态和方法 - 在模板中将
loading传给LoadingWrapper，其他状态用于控制具名插槽显隐 - 避免每个页面重复写
try/catch和loading = true/false
这样，一次封装，处处复用；一处更新，全局生效。
注意事项：避免插槽内容意外渲染
插槽本质是编译时分发，不是条件渲染。若未加保护，loading 为 true 时，插槽内容仍会执行初始化（如子组件 onMounted、watch 仍会触发）：
- 用
v-if="$slots.default && !loading"包裹插槽调用，彻底阻止渲染 - 或在子组件内监听
props.loading，主动暂停副作用（适合复杂子组件） - 服务端渲染（SSR）时注意插槽内容是否依赖客户端状态，避免水合 mismatch
不复杂但容易忽略，实际项目中常因此出现性能浪费或报错。
