Vue 的深度监视

在讨论深度监视的问题之前，我们先想一个小问题：

如果我想要监视的数据是在 data 配置项中的【对象中的数据呢】（具有多重结构）

错误例子：以下两种

第一种：因为 a 只是一个对象，没有监视到它里面的数据

第二种：在这里的 b 虽然是 data 配置项里面的对象中的数据，但它并不是 data 的对象，所以不能监视

那么该怎么做呢？

可能会想到 【a.b】去监视，但是在 vscode 里会标红报错

解决方案：

如果监视的属性具有多级结构， 一定要添加单引号。 例如：' a.b '

【console.log】语句是案例运行语句

PS：其实在 data 配置项中声明的键名都需要加单引号，只是不添加也行，久而久之就都不用了

结果如下：

一开始的页面：

修改三次之后：（在控制台输出了3个@）

那么如果我的 data 配置项中的一个对象里面有多个数据，然而我想一次性全部监视，不想在 watch 配置项里面一个个监视呢？有什么方法呢？

这个时候就要用到：深度监视

深度监视：deep 配置项

启用深度监视，默认是不开启深度监视的。
什么时候开启深度监视；当你需要监视一个具有多级结构的属性，并且监视所有的属性，需要启用深度监视。
 

例子：（在 watch 配置项中监听对象 a 的里面编写 deep）

deep 为 true ：开启深度监视（默认为 false 关闭）

后期添加监视的实现：

如果想在后期给对象添加监视，可以在【script】标签里使用：

Vue实例名.$watch('被监视的属性名',{})

【{}】里面就是你在原先的 watch 配置项里面写的东西（方法）

【console.log】语句是案例运行语句

我们来做下对比

【console.log】语句是案例运行语句

修改前：

修改后：

结果如下：

该文章为笔记，教程为动力节点的老杜Vue视频教程，Vue2 Vue3实战精讲
视频链接：https://www.bilibili.com/video/BV17h41137i4?p=1&vd_source=2136c732ce8d5a3f412e2f7064285cb7