Vue 3 引入了 Composition API，其中包括 watch 和 watchEffect 函数。这两个函数用于响应式地跟踪响应式数据的变化并执行特定的操作。
watch：
watch 用于观察单个响应式引用或响应式对象的属性，当被观察的源发生变化时，它会执行一个回调函数。
import { watch } from 'vue';
setup() {
const state = reactive({ count: 0 });
watch(() => state.count, (newValue, oldValue) => {
console.log(`The new count is ${newValue}, old count was ${oldValue}`);
});
return { state };
}watchEffect：
watchEffect 用于自动追踪其依赖的响应式引用，并在这些依赖发生变化时执行一段副作用代码。它不需要指定观察的特定数据源，而是在回调函数内部访问这些依赖。
import { watchEffect } from 'vue';
setup() {
const state = reactive({ count: 0 });
watchEffect(() => {
console.log(`The count is now ${state.count}`);
});
return { state };
}watch 更像是定义了要观察的具体数据源，而 watchEffect 则更倾向于定义一个无batching的副作用函数。
注意：在实际使用中，watch 和 watchEffect 可以根据需要选择使用，它们各有优势，但也各自有适用的场景。