vue3中watch用法

在 Vue3 中，watch 的使用方式有所变化。下面介绍一下 Vue3 中 watch 的用法：

1. 监听单个变量

import { watch } from 'vue';

watch(
  () => count.value,
  (newValue, oldValue) => {
    console.log(`count changed from ${oldValue} to ${newValue}`);
  }
);

上面代码中，`watch` 监听的是 `count.value` 这个变量，当 `count` 的值发生变化时，回调函数就会被触发。

2. 监听多个变量

import { watch } from 'vue';

watch(
  [count1, count2],
  ([newVal1, newVal2], [oldVal1, oldVal2]) => {
    console.log(
      `count1 changed from ${oldVal1} to ${newVal1}, count2 changed from ${oldVal2} to ${newVal2}`
    );
  }
);

上面代码中，`watch` 同时监听 `count1` 和 `count2` 两个变量，当任意一个变量的值发生变化时，回调函数就会被触发。

3. 监听对象或数组

import { watch } from 'vue';

const obj = reactive({
  count: 0,
  name: 'test',
});

watch(
  () => obj,
  (newVal, oldVal) => {
    console.log(
      `obj changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`
    );
  }
);

上面代码中，`watch` 监听的是整个对象 `obj`，当 `obj` 中任意一个属性的值发生变化时，回调函数就会被触发。

4. 监听异步变量

import { watch, ref } from 'vue';

const count = ref(0);
const asyncCount = ref(0);

watch(
  count,
  async (newVal, oldVal) => {
    asyncCount.value = await someAsyncFunc(newVal);
  }
);

上面代码中，`watch` 监听的是 `count` 这个变量，回调函数是异步的，当 `count` 的值发生变化时，会调用 `someAsyncFunc` 异步函数，并将返回值赋值给 `asyncCount`。

以上就是 Vue3 中 watch 的用法，需要注意的是，在 Vue3 中，watch 的使用需要引入 `watch` 函数。