WatchEffect 和Watch 的区别

watchEffect 和 watch 都是 Vue3 中的响应式 API，它们都用于观察响应式数据的变化，但它们的使用方式和行为有所不同。

watchEffect：watchEffect 接受一个函数作为参数，这个函数会立即执行，并响应式地追踪其依赖，并在其依赖变化时重新运行。watchEffect 会自动追踪函数中读取的响应式数据源。

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(count.value);
});

在上述代码中，watchEffect 会自动追踪 count，并在 count 变化时打印其值。

watch：watch 接受两个参数：要观察的数据源和一个回调函数。当数据源变化时，回调函数会被调用。与 watchEffect 不同，watch 允许我们访问前一个和当前的值。

import { ref, watch } from 'vue';

const count = ref(0);

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

在上述代码中，watch 会在 count 变化时打印新的和旧的值。

总的来说，watchEffect 更适合没有特定数据源，或者需要观察多个数据源的场景，而 watch 则更适合需要访问前一个和当前值的场景。