watch函数的用法，vue3

在Vue3中，`watch` 函数是一个用于响应式数据变化的函数。它监视一个或多个响应式数据源，并在数据变化时执行一个回调函数。与Vue2中使用`watch`的方式相比，Vue3提供了更简洁和更强大API。以下是`watch`函数的基本用法：

1. 监听单个数据源：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log('The new value is: ' + newValue);
});

上面的示例中，`watch`监视了`count`这个响应式引用的变化，并在`count`的值发生变化时执行回调函数。

2. 监听多个数据源：

watch([count, anotherRef], ([newCount, newAnother], [oldCount, oldAnother]) => {
  console.log('count changed from ' + oldCount + ' to ' + newCount);
  console.log('anotherRef changed from ' + oldAnother + ' to ' + newAnother);
});

在这个例子中，`watch`同时监视了`count`和`anotherRef`两个响应式引用的变化。

3. 使用函数式监听：

watch(() => count.value, (newValue, oldValue) => {
  console.log('The new value is: ' + newValue);
});

这里`watch`函数接受一个函数，返回需要监听的数据源。这种用法在需要对监听条件进行更复杂的判断时非常有用。

4. 配置选项：

watch(source, callback, { deep: true, immediate: true });

你可以通过配置选项来控制`watch`的行为：
- `deep`: 如果设置为`true`，则监视器会在监听到对象内部值改变时也触发回调。
- `immediate`: 如果设置为`true`，则会在`watch`创建时立即调用回调函数。

使用`watch`函数时，需要注意以下几点：
- 监听响应式引用或响应式对象时，应使用`.value`访问其值。
- `watch`是异步的，即回调函数会被放入到微任务队列中，类似于Promise的`.then`和`setTimeout`。
- 监听的回调函数不应该产生副作用，因为它们可能会被Vue重新执行。