持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

Watch监听器的作用就是，当我们监听的数据发生改变了的时候，就会执行对应的回掉函数。

watch有3个参数：

1. 监听源：其实也就是我们想监听的是哪个数据；
2. 回调函数：回调函数有两个参数 cb(newValue,oldValue)；
3. 配置对象：通过这个配置对象，我们可以配置监听器是否立即调用一次以及是否深度监听

watch(xxx, cb, {
    immediate: true, // 是否立即调用一次
    deep: true // 是否深度监听
})

监听一个值

比如说，我们有一个变量name，我们希望当name改变的时候，会在控制台打印出改变后的名称，这个时候我们就可以使用watch监听器了。

let name = ref("mac");
// 监听name
watch(name, (newValue, oldValue) => {
    console.log(newValue);
});

还有一种情况，如果我们想监听对象中的某个属性，而不是监听整个对象，在Vue2中我们是通过字符串的形式来写明我们要监听的是哪个属性，比如说监听man的name属性，我们会写成 'man.name':(newValue,oldValue)=>{}，但是在Vue3中我们有另外一种写法。watch的第一个参数还可以是一个函数，函数返回我们要监听的属性，比如说 watch(()=>{man.name},(newVal,oldVal)=>{})。

监听多个值

watch的第一个参数，可以是一个数组，里面的每一个元素就是我们想要监听的数据。要注意的是，如果第一个参数是一个数组，那么回调函数的两个参数也会变成数组，数组中的元素就是第一个参数中对应索引的元素的值。

let name = ref('mac')
let age = ref(18)
watch([name, age], (newValue, oldValue) => {
    // newValue => ['name的新值','age的新值']
    // oldValue => ['name的旧值','age的旧值']
})

第三个参数

立即执行一次

watch默认是不会执行的，不过我们可以通过第三个参数配置对象，将其 immediate 属性设为 true 来使得watch立即执行一次。 这一次执行的时候，回调函数的第二个参数oldValue为undefined。

深度监听

当我们使用watch监听使用ref包裹的有深层次的复杂对象的时候，如果被监听的属性所属层次太深就会监听不到，这个时候可以通过将配置对象的 deep 属性设为 true 来使得可以进行深度监听。

不过要注意的是，如果这个复杂对象是用reactive包裹的，那么开启不开启deep属性效果都是一样的。