vue 3 用组合函数（composable）替代高阶组件实现逻辑复用，如 useauth、useapi；配合 provide/inject 实现跨层级上下文共享；仅在纯 ui 装饰时保留轻量 wrapper 组件。
Vue 3 中逻辑复用不依赖传统高阶组件（HOC）来“包装”组件，而是以组合式 API 为核心，把高阶组件的意图——比如权限控制、数据加载、表单增强——转化为可导入、可测试、类型安全的逻辑单元。真正高效的做法，是用组合函数（Composable）替代 HOC 的逻辑层，再按需配合 provide/inject 或 props 实现跨层级能力注入。
用 Composable 封装高阶意图
把原本写在 HOC 里的状态、副作用、判断逻辑，抽成独立函数。它不操作 DOM，也不返回组件，只提供能力接口。
- 例如权限逻辑不再写成
withAuth(LoginForm)，而是封装为useAuth()，返回{ isLoggedIn, userInfo, check } - 数据获取逻辑统一为
useApi(url)，内部管理 loading、error、data，并自动支持多次调用互不干扰 - 所有状态都在函数作用域内，无命名冲突，TypeScript 可精准推导入参与返回值类型
用 provide/inject 补足跨层级上下文增强
当需要让子组件（尤其是深层嵌套的）共享同一份增强能力时，provide/inject 比 HOC 更轻量自然——不改变组件树结构，只注入上下文。
- 父组件调用
useFormContext()并provide(FORM_CTX, ctx)，子组件直接const { state, markDirty } = useFormContext() - 适合场景：表单校验状态、主题切换开关、国际化 locale、全局错误收集器
- 避免 HOC 带来的 DevTools 层级膨胀（如一堆
WithLoading、WithPermission节点）
仅在必要时用函数式 wrapper 组件
纯 UI 增强或极简透传场景下，可保留轻量 wrapper，但应避免复杂逻辑。
- 例如：
const withLoading = (Comp) => defineComponent({ setup(props, { slots }) { const loading = ref(false); return () => h(Comp, { ...props, loading }, slots) }}) - 不处理业务逻辑，不管理响应式状态，仅做 props 透传或基础装饰
- 不推荐用于权限、校验、API 等含状态/副作用的场景——这些必须交给 Composable
按业务域组织复用逻辑，而非技术类型
目录和命名体现功能语义，便于协作与维护。
-
/composables/useLogin.ts：整合 token 刷新、登录态检查、错误重试 -
/composables/useOrderList.ts：封装分页请求、筛选条件、列表刷新、导出逻辑 -
/composables/useImageUpload.ts：处理预览、裁剪、压缩、上传进度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
