Vue组件高阶逻辑复用核心是抽象通用能力为可组合单元，通过Composable封装纯逻辑、provide/inject注入跨层级上下文、作用域插槽暴露控制权，并按业务域组织代码。
Vue 组件设计中实现高阶逻辑复用，核心不是“包装组件”，而是把通用能力（比如权限校验、请求管理、表单上下文）抽象成可组合、可注入、可定制的单元。Vue 3 的组合式 API 让这件事更清晰、更安全、更易维护。
用 Composable 封装纯逻辑
把原本写在 HOC 或 Mixin 里的状态、副作用、判断逻辑，抽成独立函数，即 Composable。它不操作 DOM，也不返回 JSX，只负责“提供能力”。
- 每个函数聚焦单一职责，例如
useApi管理请求，usePermission判断权限，useLoading控制加载态 - 所有变量作用域隔离，无命名冲突风险；支持 TypeScript 类型推导，参数和返回值可精准标注
- 可在任意 setup 组件中直接调用，多个组件使用互不影响实例
用 provide/inject 注入跨层级上下文
当增强能力需穿透多层子组件（如表单校验状态、主题切换开关、国际化 locale），provide/inject 比 HOC 更自然——不改变组件结构，只注入能力。
- 父组件通过
provide暴露统一接口（如{ markDirty, setValid }） - 任意深层子组件用
inject消费，无需逐层透传 props 或 slot - 配合 Symbol 做 key，避免命名污染；适合构建 FormProvider、LocaleProvider 等上下文容器
用插槽暴露运行时控制权
HOC 不该决定怎么渲染，而应把处理后的数据、方法、状态通过作用域插槽透出，由业务侧自由组合 UI。
立即学习“前端免费学习笔记（深入）”；
- 默认插槽接管整体布局（如 ModalWrapper、PageLayout）
- 作用域插槽传递内部状态：
<slot :data="data" :loading="loading" :refetch="refetch"></slot> - 具名插槽分离关注点：如
#header、#toolbar、#empty，比一堆 renderXXX props 更直观且响应式
按业务域组织，而非技术类型
逻辑复用的关键是分层合理，避免堆砌或泛化。
- 围绕功能组织：如 “用户登录” 对应
useLogin（含 token 管理、错误提示、loading） - 围绕资源组织：如 “订单列表” 对应
useOrderList（含分页、筛选、刷新） - 目录结构体现分层：
/composables/useXxx.ts、/components/UiXxx.vue、/stores/xxx.ts
