在讨论深度监视的问题之前,我们先想一个小问题:
如果我想要监视的数据是在 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