体会1
1、js文件中定义useXX函数
export function usetestY() {
const count = ref(10);
const doubleCount = computed(() => count.value * 2);
return {
count,
doubleCount,
};
}
2、在vue文件中使用useXX函数
import { usetestY } from './data';
const { count, doubleCount } = usetestY();
console.log('1--', count);
console.log('2--', doubleCount);
体会2
3、useAdd自定义hooks
const useAdd = ({ num1, num2 }) => {
const addNum = ref(0);
watch([num1, num2], ([num1, num2]) => {
addFn(num1, num2);
});
const addFn = (num1, num2) => {
addNum.value = num1 + num2;
};
return {
addNum,
addFn,
};
};
export default useAdd;
4、使用
import useAdd from './data';
const { addFn, addNum } = useAdd({ num1, num2 });
addFn(num1.value, num2.value);
console.log('3--', addNum);