Vue 3推荐用自定义Hook+provide/inject替代HOC：1. 用Composable封装可复用逻辑（如useApi）；2. 用provide/inject实现跨层级上下文增强（如表单校验）；3. 仅简单场景慎用函数式wrapper组件。
用 setup 实现高阶组件逻辑复用，本质不是“包装组件”，而是把高阶组件的意图——比如日志、权限控制、加载状态封装——转译为组合式 API 的逻辑抽象。Vue 3 中真正推荐、轻量且类型友好的方式，是用 自定义 Hook + provide/inject 或 props 透传 替代传统 HOC 模式，既避免 Mixins 的命名冲突和隐式依赖，又比 render 函数 HOC 更易维护。
用 Composable 封装可复用行为逻辑
把原本写在 HOC 里的副作用、状态、判断逻辑，抽成独立的函数（即 Composable），在任意 setup 组件中直接调用。它不操作 DOM，也不返回 JSX，只负责“提供能力”。
- 例如封装一个带 loading 和错误拦截的请求逻辑：// useApi.js
export function useApi(url) {<br> const data = ref(null)<br> const loading = ref(false)<br> const error = ref(null)<br><br> const fetch = async () => {<br> loading.value = true<br> try {<br> const res = await fetch(url)<br> data.value = await res.json()<br> } catch (e) {<br> error.value = e<br> } finally {<br> loading.value = false<br> }<br> }<br><br> return { data, loading, error, fetch }<br>} - 在多个组件中复用，互不影响实例：
// ProductList.vue<br>import { useApi } from './useApi'<br>setup() {<br> const { data, loading, fetch } = useApi('/api/products')<br> onMounted(fetch)<br> return { data, loading }<br>}
用 provide/inject 实现“上下文式”增强
当需要跨多层子组件共享增强能力（如表单校验上下文、主题切换开关、国际化 locale），provide/inject 比 HOC 更自然——它不改变组件结构，只注入能力。
- 父组件提供统一行为接口：// FormProvider.vue
const FORM_CTX = Symbol('form-ctx')<br>export function useFormContext() {<br> const ctx = inject(FORM_CTX)<br> if (!ctx) throw new Error('no form context')<br> return ctx<br>}<br><br>export default {<br> setup(props, { slots }) {<br> const state = reactive({ dirty: false, valid: true })<br> provide(FORM_CTX, {<br> state,<br> markDirty: () => state.dirty = true,<br> setValid: (v) => state.valid = v<br> })<br> return () => slots.default?.()<br> }<br>} - 任意子孙组件按需消费：
// InputField.vue<br>import { useFormContext } from './FormProvider'<br>setup(props) {<br> const { markDirty, setValid } = useFormContext()<br> return () => (<br> <input> onblur="markDirty()" <br> oninput="(e) => setValid(e.target.value.length > 0)"<br> /><br> )<br>}
用函数式 wrapper 组件做轻量级增强（慎用）
仅当必须动态包裹、注入 props 或拦截插槽时，才写一个极简的 setup 函数组件作为 wrapper，但它不承担业务逻辑，只做透传与增强。
- 例如加一层权限守卫：// withAuth.js
export function withAuth(Wrapped) {<br> return {<br> props: Wrapped.props,<br> setup(props, { attrs, slots, emit }) {<br> const user = useUserStore() // 假设已有用户状态<br> return () => user.isLoggedIn<br> ? h(Wrapped, { ...props, ...attrs }, slots)<br> : h('div', '请先登录')<br> }<br> }<br>} - 使用：
import MyPage from './MyPage.vue'<br>export default withAuth(MyPage)
- 注意：这种写法会丢失原组件的 name 和类型推导，调试和 TS 支持较弱，建议仅用于简单场景。
