Vue 3 中的代码复用：Composition API替代Mixin

Vue 2 中的 Mixin 提供了便捷的代码复用机制，但在 Vue 3 中，Mixin 已被 Composition API 所取代。本文将演示如何利用 Composition API 在 Vue 3 中实现类似 Mixin 的功能。

利用 Composition API 实现代码复用

Vue 3 的 Composition API 允许开发者将逻辑拆分成可复用的函数，从而实现代码复用。 我们通过创建一个自定义的 Composition 函数来模拟 Mixin 的行为：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

import { ref, watch } from 'vue';

export default function useTranslateWatch(isTranslateRef, queryData) {
  // isTranslateRef：通常是从 Vuex store 或 reactive 对象中获取的 ref 对象
  watch(isTranslateRef, (val) => {
    console.log('isTranslate changed:', val);
    queryData(); // 当 isTranslateRef 值改变时执行 queryData 函数
  });
}

在组件中使用该函数：

import { ref } from 'vue';
import { useStore } from 'vuex'; // 假设使用 Vuex
import useTranslateWatch from '@/composables/useTranslateWatch';

const store = useStore();
const isTranslate = ref(store.state.isTranslate); // 从 store 获取状态

function queryData() {
  // ...你的数据查询逻辑
  console.log('Querying data...');
}

useTranslateWatch(isTranslate, queryData);

通过这种方式，useTranslateWatch 函数可以被多个组件复用，实现类似 Vue 2 Mixin 的效果，并且代码更加清晰易于维护。 这避免了Mixin可能带来的命名冲突等问题。