如何通过 setup 实现组件逻辑复用，摆脱 Mixins 混乱困境？

本文共计894个文字，预计阅读时间需要4分钟。

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