Vue3 中 watch 与 watchEffect 的使用方法

在 Vue3 的响应式编程体系中，watch 与 watchEffect 是两个强大的工具，它们用于响应式数据的变化并执行相应的副作用操作。掌握这两个 API 的使用方法，能够极大提升开发效率与代码质量。

watch 函数用于监视一个或多个响应式数据源的变化，并在变化时执行回调函数。它接收三个参数：第一个参数是要监视的数据源，可以是一个 ref、reactive 对象的属性，甚至是一个返回值的函数；第二个参数是回调函数，当数据源发生变化时会被调用；第三个参数是一个可选的配置对象。

例如，监视一个简单的 ref：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
});

count.value++;

在这个例子中，每当 count 的值发生变化，watch 的回调函数就会执行，打印出新值和旧值。

watch 也可以监视多个数据源：

import { ref, watch } from 'vue';

const count1 = ref(0);
const count2 = ref(0);

watch([count1, count2], (newValues, oldValues) => {
  console.log('新值:', newValues);
  console.log('旧值:', oldValues);
});

count1.value++;
count2.value++;

此时，只要 count1 或 count2 发生变化，回调函数都会执行。

而 watchEffect 则更加简洁和直观。它不需要显式指定要监视的数据源，而是自动收集回调函数中使用的所有响应式数据作为依赖。只要这些依赖中的任何一个发生变化，watchEffect 就会重新执行回调函数。

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`count 的值是: ${count.value}`);
});

count.value++;

在这个例子中，watchEffect 自动检测到 count 的变化并重新执行回调函数。

watchEffect 还可以传入一个选项对象，用于配置副作用的执行时机、清除函数等。

watch 适用于需要精确控制监视数据源和处理新旧值的场景；而 watchEffect 则更适合于依赖关系比较简单，希望自动追踪依赖并执行副作用的情况。在实际开发中，合理运用这两个 API，能够让代码逻辑更加清晰，响应式处理更加高效。