Vue 3 Composition API 如何模拟 Vue 2 混入功能？
Vue 2 中的混入机制方便了代码复用。虽然 Vue 3 已移除混入，但 Composition API 提供了等效的解决方案。
问题：如何用 Composition API 重写以下 Vue 2 混入代码：
watch(() => store.istranslate, (val) => {
console.log(val);
// querydata();
});
解决方案：
立即学习“前端免费学习笔记（深入）”；
创建一个可复用的 Composition 函数：
// useTranslateWatch.js
import { ref, watch } from 'vue';
export default function useTranslateWatch(istranslateRef, queryData) {
watch(istranslateRef, (val) => {
console.log(val);
queryData();
});
}
使用方法：
// MyComponent.vue
import { ref } from 'vue';
import { useStore } from 'vuex'; // 假设使用 Vuex
import useTranslateWatch from '@/composables/useTranslateWatch';
export default {
setup() {
const store = useStore();
const isTranslate = ref(store.state.isTranslate); // 从 store 获取数据
const queryData = () => {
// ...您的查询逻辑
};
useTranslateWatch(isTranslate, queryData);
return {};
}
};
此方法将公共逻辑封装在 useTranslateWatch 函数中，并在多个组件中复用，达到与 Vue 2 混入相同的效果，同时保持了 Vue 3 Composition API 的简洁性和可读性。 通过 ref，我们确保了响应式数据的正确监听和更新。
