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 的行为：
立即学习“前端免费学习笔记（深入）”；
<code class="javascript">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 函数
});
}</code>
在组件中使用该函数：
<code class="javascript">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);</code>
通过这种方式，useTranslateWatch 函数可以被多个组件复用，实现类似 Vue 2 Mixin 的效果，并且代码更加清晰易于维护。 这避免了Mixin可能带来的命名冲突等问题。
