Vue 3 setup 高阶组件逻辑复用: 告别 Mixins 的终极方案

在 Vue 2 时代，高阶组件（HOC）是复用组件逻辑的常见手段，但随之而来的“包装地狱”和类型推导问题也让开发者感到困扰。进入 Vue 3 组合式 API 时代，我们可以采用更优雅的解决方案。

核心思路非常清晰：不再执着于“包装组件”这一形式，而是聚焦高阶组件背后的意图。无论是日志记录、权限控制还是加载状态管理，这些意图本质上都是一段可复用的逻辑。在 Vue 3 中，更推荐的做法是使用自定义 Hook（Composable）配合 provide/inject 或 props 透传来替代传统的 HOC 模式。这一组合既避免了 Mixins 的命名冲突和隐式依赖问题，又比使用 render 函数编写的 HOC 更易于维护和类型推导。

用 Composable 封装可复用行为逻辑

这是最直接的一步。将原本塞在 HOC 中的副作用、状态和判断逻辑全部抽离出来，变成一个独立的、纯粹的函数——也就是 Composable。它的职责明确：只“提供能力”，不操作 DOM，也不返回 JSX。

以封装一个带加载和错误处理的通用请求逻辑为例：

export function useApi(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const fetch = async () => {
    loading.value = true
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  return { data, loading, error, fetch }
}

随后，在任何组件的 setup 中，都可以像调用普通函数一样使用它，各个组件实例之间的状态完全独立，互不干扰：

// ProductList.vue
import { useApi } from './useApi'
setup() {
  const { data, loading, fetch } = useApi('/api/products')
  onMounted(fetch)
  return { data, loading }
}

用 provide/inject 实现“上下文式”增强

当复用的逻辑需要跨越多个层级的组件时，例如一套完整的表单校验规则、全局的主题切换或国际化语言包，再使用 HOC 一层层包裹会显得笨重。此时，provide/inject 的优势得以体现——它不改变组件树的结构，只在顶层提供能力，让任意深度的子孙组件按需消费，非常自然。

下面是一个表单上下文管理的例子。首先，在父级或根组件中提供统一的接口：

const FORM_CTX = Symbol('form-ctx')
export function useFormContext() {
  const ctx = inject(FORM_CTX)
  if (!ctx) throw new Error('no form context')
  return ctx
}

export default {
  setup(props, { slots }) {
    const state = reactive({ dirty: false, valid: true })
    provide(FORM_CTX, {
      state,
      markDirty: () => state.dirty = true,
      setValid: (v) => state.valid = v
    })
    return () => slots.default.()
  }
}

然后，在任意一个表单项子组件中，都可以轻松注入并使用这些方法：

// InputField.vue
import { useFormContext } from './FormProvider'
setup(props) {
  const { markDirty, setValid } = useFormContext()
  return () => (
    
  )
}

用函数式 wrapper 组件做轻量级增强（慎用）

这是否意味着 HOC 模式已被完全淘汰？并非如此。在某些特定场景下，例如必须动态包裹一个组件、注入额外 props，或拦截并操作其插槽内容时，一个极简的函数式 Wrapper 组件仍然有用武之地。但需注意，它的角色应仅限于“管道”和“增强器”，复杂的业务逻辑仍应交给 Composable。

一个典型的例子是权限守卫：

export function withAuth(Wrapped) {
  return {
    props: Wrapped.props,
    setup(props, { attrs, slots, emit }) {
      const user = useUserStore() // 假设已有用户状态
      return () => user.isLoggedIn
         h(Wrapped, { ...props, ...attrs }, slots)
        : h('div', '请先登录')
    }
  }
}

使用方式与过去的 HOC 类似：

import MyPage from './MyPage.vue'
export default withAuth(MyPage)

需要特别提醒的是，这种写法有一个明显缺点：它会丢失原始组件的 name 属性，并且在 TypeScript 下的类型推导支持较弱，给调试带来不便。因此，务必谨慎使用，仅将其作为简单场景下的备选方案。

总结一下，Vue 3 的组合式 API 为逻辑复用提供了新思路。从“组件包装”转向“逻辑抽象”，用 Composable 处理独立功能，用 provide/inject 管理跨层级上下文，只在必要时使用轻量 Wrapper。这套方法论能让代码库更清晰、更易维护，也能更充分地发挥 TypeScript 的全部威力。