LoadingWrapper组件通过插槽封装加载状态，支持default/loading/empty/error具名插槽，结合useAsyncData组合式函数统一管理异步逻辑，避免重复代码与副作用误触发。

用插槽封装 Loading 状态，核心是把“加载中”逻辑抽离成可复用组件，同时保留子内容的灵活性——插槽让业务组件专注渲染，Loading 交由容器控制。

用插槽承载真实内容，Loading 状态独立控制

创建一个 LoadingWrapper 组件，接收 loading 布尔值作为 prop，内部用 v-if 控制是否显示骨架屏或 loading 图标，其余区域通过 渲染传入的内容：

• 当 loading=true，只显示加载态（如
  或第三方 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

不复杂但容易忽略，实际项目中常因此出现性能浪费或报错。