学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样。侦听器是常用的 Vue API 之一，它用于监听一个数据并在数据变动时做一些自定义逻辑

watch 侦听器使用

watch API 使用，至少需要指定两个参数： source 和 callback，其中 callback 被明确指定只能为函数，所以不同是用方式的差别其实只在 source

上面的代码是页面上有一个数字，点击按钮一下，数字加一，然后侦听器侦听数字的变化，打印出侦听的最新值和旧值。

上边是 vue3 侦听器的简单案例，侦听器和计算属性一样，可以创建多个侦听器，这个是没有问题的。
watch API 至少需要指定两个参数: source 和 callback。
通过上边的案例我们看到了，确实是两个，source 是监听的数据，callback是监听回调，那为啥说是至少呢？因为他还有第三个参数 —— 配置对象。

在 vue2 里面，我们打开页面就想让侦听器立即执行，而不是在第一次数据改变的时候才开始执行，这时候有一个参数叫 immediate ，设置了这个参数，创建第一次就执行，vue3 同样可以使用。

案例中刷新执行的时候发现，在点击按钮之前，也就是 num 创建的时候，侦听器是没有执行的，所以加上 immediate 参数，就可以让侦听器立即执行操作。

我们看到，还没有点击按钮让 num 加一的时候，控制台就有数据打印了，为什么呢？就是因为我们加了 immediate 为 true，让侦听器立即执行。控制台输出最新的值也就是我们初始化的值1，旧值没有，所以输出了 undefined。

侦听器监听 reactive

在监听整个 reactive 响应式对象的时候，确实当里面的属性值发生改变了之后可以被侦听器检测到，但是 newVal 和 oldVal 的值都是新的，默认是10，点击之后，新值是 11 很正常，但是旧值不应该是 10 吗？为什么这里旧值和新值一样也是 11 呢？
如果监听整个 reactive 数据的话，只能回调到最新的值，获取不到旧的值。
如果我修改age属性，我就要获取age旧的值怎么办？其实我们只需要监听num下面的 age 就可以了。

我们监听对象直接是 num.age，监听年龄属性值

我们可以看到，侦听器直接报了一个警告，啥意思呢，其实不能直接这样监听。
当我们需要监听某个对象属性的时候，我们不能直接对象点属性的方式进行监听，需要传入一个getter方法，也就是箭头函数进行监听。

通过箭头函数，我们就可以实现对象属性的监听。
很多人说，vue2 在监听对象的时候需要对侦听器设置深度侦听，为什么 vue3 这个不需要呢？因为它监听响应式对象，默认就是深度监听。但是，如果监听的是深度嵌套对象或数组中的 property 变化时，仍然需要 deep 选项设置为 true。
我们监听深层嵌套的 time 属性值。

发现点击之后没有监听到

这个时候就可以加上 deep 深度监听。

加上深度监听 { deep:true }

我们可以看到打印出信息来了，有一点要注意，深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请要留意性能。