如何利用 setup 实现高阶组件逻辑复用: 告别 Mixins 混乱的终极方案

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<br>      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 支持较弱，建议仅用于简单场景。