自定义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);