Vue3 中常用的 Composition(组合)API-watch(监视) 函数

watch(监视)函数

vue3 的数据监视和 vue2 配置功能是一样的，都是对变化的数据进行监视

案例展示

vue3 中也是支持 vue2 中编写数据监视方式的，但是不推荐(都用 vue3 了，还写啥 vue2 啊！)

下面通过案例演示分别演示 vue2 和 vue3 的写法

vue2 实现

分为简单写法和完整写法

简单形式

直接把要监视的数据写成一个函数，会有两个参数，新值和老值

完整形式

完整形式要把监视的属性写成一个对象，而不是函数，对象里面有很多的配置，其中最重要的是 handler，它同样可以接受到新值和老值两个参数

它相比于简单形式，优势在于可以配置更多的属性，比如立即监听(immediate)，深度监视(deep)等

vue3 实现

以上无论是简单形式还是完整形式，都只是 vue2 中的写法

在 vue3 中，watch 和 computed 一样，变成了一个组合式的 API,使用的时候需要先引入。

引入 watch

  // 引入watch函数  import {watch} from "vue";

引入完成之后就可以使用了，在 vue3 中使用 watch 十分简单，但是有一些不同的使用场景和坑，下面说明

情况 1：监视定义 ref 定义的一个响应式数据

情况 2：监视定义 ref 定义的多个响应式数据

这时候新增一个需求，再定义一个 ref 响应式数据进行监听

最笨的办法就行，再写一个 watch 监听，把监听的数据写成 info

这也是 vue3 和 vue2 的差距，在 vue2 中怎么可能写多个 watch 呢，只能写一个 watch 配置项，但是在 vue3 中就可以写多个 watch 函数

但是这种写法较为麻烦，有一个简单的写法，只写一个 watch 函数，监视的值为一个数组：

watch 中加入属性

现在想在 watch 中加入一些属性，比如自动监听，这时候 watch 的第三个参数的作用就体现出来了，就是专门给我们加入监听的属性用的

watch 的三个参数：

参数 1：监视数据(属性)，参数 2：回调函数，参数 3：配置属性

一上来就进行数据监视了，说明属性生效了

情况 3：监视 reactive 定义的一个响应式数据全部属性

刚才监视的都是 ref 普通数据类型，如果使用 reactive 监视对象类型的数据，会有一些坑，下面演示一下

坑 1：无法获取到正确的 oldValue

注意：这里有一个坑，可以发现不管是姓名还是年龄，改变前后都一样，无法获取到正确的 oldValue，而且这个问题目前无法解决

坑 2：强制开启了深度监视且无法关闭

vue3 默认(强制)开启了 deep(深度监视)并且无法关闭

可以看到即使把 deep 设置为 false，也是可以监视到的

既然 deep 属性关不了，那么肯定是影响效率的，所以就有了下面这种情况

情况 4：监视 reactive 定义的一个响应式数据中的某一个属性

我们可以只监视对象中的某一个数学，可以使用函数，返回值就是这个属性：

情况 5: 监视 reactive 定义的一个响应式数据中的某些属性

这种写法稍微复杂点，使用数组包裹起来要监视的属性即可：

特殊情况:

如果要监视 reactive 里面的多层次对象，需要开启 deep:true:

watch 函数总结

• 与 Vue2.x 中 watch 配置功能一致

• 两个小“坑”：

• 监视 reactive 定义的响应式数据时：oldValue 无法正确获取、强制开启了深度监视（deep 配置失效）。

• 监视 reactive 定义的响应式数据中某个属性时：deep 配置有效。