Vue watch()函数的用法

watch() 函数需要监听特定的数据源，并在单独的回调函数中应用。当被监听的数据源发生变化时，才会调用回调函数。

例如下面的代码监听普通类型的对象：

let count = ref(1);
const changeCount = () => {
    count.value+=1
};
watch(count, (newValue, oldValue) => { //直接监听
    console.log("count发生了变化！");
});

watch() 函数还可以监听响应式对象：

let goods = reactive({
    name: "洗衣机",
    price: 6800,
});
const changeGoodsName = () => {
    goods.name = "电视机";
};
watch(()=>goods.name,()=>{       //通过一个函数返回要监听的属性
    console.log('商品的名称发生了变化！')
})

在 Vue 2.x 中，watch 可以监听多个数据源，并且执行不同的函数。在 Vue.js 3.x 中也能实现相同的情景，通过多个 watch 来实现，但在 Vue 2.x 中，只能存在一个 watch。

例如在 Vue.js 3.x 中监听多个数据源：

watch(count, () => {
    console.log("count发生了变化！");
});
watch(
    () => goods.name,
    () => {
        console.log("商品的名称发生了变化！");
    }
);

对于Vue.js 3.x，监听器可以使用数组同时监听多个数据源。例如：

watch([() => goods.name, count], ([name, count], [preName, preCount]) => {
    console.log("count或goods.name发生了变化！");
});