Vue3组合式API：优雅地复用代码
Vue2中的混入(mixin)机制常用于代码复用，但在Vue3中，推荐使用更清晰、更易维护的组合式函数(composition function)来实现类似功能。
创建自定义组合式函数
让我们创建一个名为useTranslateWatch的组合式函数：
立即学习“前端免费学习笔记（深入）”；
import { ref, watch } from 'vue';
export default function useTranslateWatch(isTranslateRef, queryData) {
watch(isTranslateRef, (val) => {
console.log('isTranslate changed:', val);
queryData();
});
}
在组件中使用组合式函数
在需要复用此逻辑的组件中，导入并调用该函数：
import { ref } from 'vue';
import { useStore } from 'vuex';
import useTranslateWatch from '@/composables/useTranslateWatch';
export default {
setup() {
const store = useStore();
const isTranslate = ref(store.state.isTranslate);
const queryData = () => {
// ...你的查询逻辑...
console.log('Querying data...');
};
useTranslateWatch(isTranslate, queryData);
return {
isTranslate
};
}
};
通过这种方式，当isTranslate的值发生变化时，queryData函数将被自动执行，实现了与Vue2混入类似的代码复用效果，同时保持了代码的模块化和可读性。 这避免了混入可能带来的命名冲突和难以调试的问题。
