Vue的watch函数用于观察一个或多个响应式引用（ref）或计算属性（computed）。当观察的目标发生变化时，watch函数会执行一个回调函数。
以下是一个使用watch的例子：
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
count.value++; // 输出 "count changed from 0 to 1"
在这个例子中，我们创建了一个响应式引用count，然后使用watch来观察它。当count的值改变时，watch的回调函数就会被执行。
watch函数的实现原理是使用Vue的响应式系统来跟踪回调函数的依赖关系。当回调函数访问一个响应式值时，这个值就会被添加到回调函数的依赖列表中。然后，当这个值改变时，回调函数就会被重新执行。
你也可以使用watch来观察多个响应式引用或计算属性。在这种情况下，你需要传递一个数组作为watch的第一个参数，然后回调函数的参数也会是一个数组，包含每个观察目标的新值和旧值。
import { ref, watch } from 'vue';
const count1 = ref(0);
const count2 = ref(0);
watch([count1, count2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {
console.log(`count1 changed from ${oldCount1} to ${newCount1}`);
console.log(`count2 changed from ${oldCount2} to ${newCount2}`);
});
count1.value++; // 输出 "count1 changed from 0 to 1"
count2.value++; // 输出 "count2 changed from 0 to 1"
在这个例子中，我们同时观察count1和count2。当任何一个值改变时，watch的回调函数都会被执行。
