vue3中的watch的用法

watch函数收三个参数：

1. 需要进行监听的数据的数组，

2. 监听的数据发生改变时的回调

3. 配置项

一、监听基础类型

二、监听复杂类型

复杂类型的监听有很多种情况，具体的内容如下

1. 监听整个对象

其第一个参数是直接传入要监听的对象。当监听整个对象时，只要这个对象有任何修改，那么就会触发 watch 方法。无论是其子属性变更（如 demo.name），还是孙属性变更（如 demo.soulmate.name）...，都是会触发 watch 方法的。

2. 监听对象中的某个属性

监听 demo 对象的 name 属性，那么只有当 demo 对象的 name 属性发生变更时，才会触发 watch 方法，其他属性变更不会触发 watch 方法。注意，此时的第一个参数是一个箭头函数。

3. 只监听对象的子属性

watch(() => ({ ...demo }), (newValue, oldValue) => {console.log('watch 已触发', newValue)})

这种情况，只有当 demo 的子属性发生变更时才会触发 watch 方法。孙属性，曾孙属性... 发生变更都不会触发 watch 方法。也就是说，当你修改 demo.soulmate.name 或者 demo.soulmate.nickName 时是不会触发 watch 方法的。

4. 监听对象的所有属性

watch(() => demo, (newValue, oldValue) => {console.log('watch 已触发', newValue)}, { deep: true })

这个相当于监听整个对象（效果与上面的第一种相同）。但是实现方式与上面第一种是不一样的，这里我们可以看到，第一个参数是箭头函数，并且还多了第三个参数 { deep: true }。当加上了第三个参数 { deep: true }，那么就不仅仅是监听对象的子属性了，它还会监听 孙属性，曾孙属性 ...

通常要实现监听对象的所有属性，我们都会采用上面第一种方法，原因无他，第一种编码简单，第一个参数直接传入 demo 即可。

三、组合监听

什么是组合监听呢？举个例子，比如我想同时监听 demo 对象的 name 属性，和基础类型 nums，只要他们其中任何一个发生变更，那么就触发 watch 方法。