自定义hooks函数

体会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);