Vue3 setup中watch怎么使用呀？

watch在Vue3 setup里是干啥的呢？

在Vue3的setup函数里呀,watch可是个很有用的家伙哦，它主要的作用呢，就是用来监听数据的变化啦，比如说，你有一个响应式的数据，可能是个ref创建的简单数据类型，也可能是个reactive创建的复杂对象里面的某个属性呀，当这个数据发生改变的时候呢，watch就能察觉到，然后你就可以根据这个变化去做一些相应的操作哦，比如更新另外一个数据呀，或者触发某个函数去干点别的事儿呢。

怎么在setup里用watch来监听ref数据的变化呀？

这可不难哦,首先呢，你得在setup函数里面引入watch，就像这样：

import { ref, watch } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count的值从${oldValue}变成了${newValue}`);
    });
    return {
      count
    };
  }
};

在上面的代码里呀,我们先用ref创建了一个叫count的数据，初始值是0哦，然后呢，我们就用watch去监听这个count啦，watch的第一个参数就是你要监听的那个ref数据，第二个参数呢，是一个回调函数，这个回调函数会在count的值发生变化的时候被调用哦，在回调函数里面呀，它会给你传入两个参数，newValue就是变化后的新值啦，oldValue就是变化之前的值哦，这样你就可以清楚地知道count到底是怎么变的啦，然后在回调函数里你就可以写你想做的那些操作啦，这里我们就是简单地在控制台打印了一下变化的情况呢。

那要是监听reactive对象里面的属性变化呢？

如果是要监听reactive对象里面的属性变化呀,稍微有点不同哦，看下面这个例子哈：

import { reactive, watch } from 'vue';
export default {
  setup() {
    const state = reactive({
      name: '小明',
      age: 18
    });
    watch(() => state.age, (newValue, oldValue) => {
      console.log(`年龄从${oldValue}变成了${newValue}`);
    });
    return {
      state
    };
  }
};

这里呢,我们先创建了一个reactive的对象state，里面有name和age两个属性哦，要监听age这个属性的变化呢，我们在watch的第一个参数那里呀，得传一个函数，这个函数返回的就是我们要监听的那个属性哦，也就是state.age啦，然后后面的回调函数跟监听ref数据变化时的回调函数差不多啦，也是能拿到新值和旧值，这样就能根据年龄的变化去做相应的处理啦，比如这里就是在控制台打印变化情况哦。

能不能同时监听多个数据的变化呀？

当然可以啦！比如说你想同时监听两个ref数据或者两个reactive对象里面不同属性的变化呀，watch也能搞定哦，看下面这个例子，我们同时监听两个ref数据的变化哈：

import { ref, watch } from 'vue';
export default {
  setup() {
    const count1 = ref(0);
    const count2 = ref(5);
    watch([count1, count2], ([newValue1, newValue2], [oldValue1, oldValue2]) => {
      console.log(`count1的值从${oldValue1}变成了${newValue1}，count2的值从${oldValue2}变成了${newValue2}`);
    });
    return {
      count1,
      count2
    };
  }
};

在这个例子里呀,我们把要监听的两个ref数据count1和count2放在一个数组里，作为watch的第一个参数传进去哦，然后回调函数那里呢，它会给你传入两个数组，第一个数组就是变化后的新值啦，分别对应count1和count2的新值，第二个数组就是变化之前的旧值哦，也是分别对应count1和count2的旧值呢，这样你就可以同时知道这两个数据的变化情况，然后在回调函数里根据需要去做相关的操作啦。

要是同时监听reactive对象里面不同属性的变化呀,也是类似的做法哦，就是在第一个参数那里把返回不同属性的函数放在一个数组里传进去就好啦，这里就不具体写例子啦，你可以自己试试哦。

watch还有其他什么好玩的用法或者注意事项吗？

嗯,还有一些小细节呢，比如说呀，watch还有个第三个参数，是一个配置对象哦，这个配置对象可以设置一些额外的东西呢，比如有个immediate属性，如果把它设为true的话呀，那么在一开始创建这个监听的时候，就会立刻执行一次回调函数哦，就好像这个数据已经发生了一次变化一样啦，即使实际上还没变化呢，这在有些情况下是挺有用的哦，比如你想在页面加载的时候就根据某个数据的初始值去做一些初始化的操作呀，就可以用上这个immediate啦。

还有个deep属性哦,如果你的数据是个复杂的对象，比如reactive创建的很深层次的对象呀，你想深度监听它里面所有层级的属性变化，那你就可以把deep属性设为true啦，不过要注意哦，设置deep为true可能会有一些性能上的影响呢，因为它得一直去检查对象里面各个层级的属性有没有变化呀，所以如果不是特别必要，可不要随便乱用这个deep属性哦。

好啦,关于Vue3 setup里watch的使用大概就是这些啦，希望能帮你更好地理解和运用它哦！