数据更新关于监视
- 我们之前讲过，我们在data当中配置的属性，最终会挂载在vue实例身上，而data这个配置项，最终也会在vue身上成为一个新的属性 == _data
文章插图
- 当我们在页面DOM当中 ， 去使用data当中的属性的时候，属性值发生变化 ， 页面是不是会自动更新？ 为什么会这样？
- 你可以理解为 Vue底层默认有一个监视器，负责监视这些属性的变化
- 与watch和computed不同 ， 这个监视是全局的 ， watch与computed是针对单独的，或者一些属性
检测数据的原理这个概念是非常重要的，所以这节课是不能跳过的，否则有一天会为这个行为买单（谢谢，已经买过了）
我们先来做个需求吧，这个需求不演示不行
- 你写一段代码，这个代码你需要修改data当中的数据
- 修改数据的行为，不能被vue检测到 ， 也就是卡bug 。
- 请你实现这个功能
文章插图
文章插图
button按钮呢，设置了一个点击事件，这个点击事件用来单独修改 马冬梅这个对象的信息
文章插图
测试结果可以看到，在这种赋值的情况下 ， 我们成功的对 马冬梅 进行了修改数据
并且在vue当中也能检测到
文章插图
卡bug，引出问题既然是 对马冬梅进行修改，我们换一种方式来对他进行修改
文章插图
为什么这次数据修改不成功了 ， 这是为什么？
总结
- 当我点击这个按钮的时候，在内存当中 ， persons[0]的数据确实发生改变了
- 但是，这次修改并没有被vue所检测到
- 至于控制台的数据到底修补修改 ， 取决于你什么时候打开开发者工具
文章插图
vue是如何检测对象数据改变的
- 我们先回顾一下关于vue的数据监测，详细博文
- 我现在data这里有一个属性name和属性persons
文章插图
- 打开控制台 ， 在vue实例身上也有这俩属性
文章插图
- 我们都知道，为什么这俩data当中属性会出现在vue实例身上 ， 是因为做了数据代理
- 在vue身上有个_data，这个下划线data当中包含着我们上图配置的data的所有数据，并且还对这个配置项data做了加工
文章插图
- 因为如果只是 将 data的值，赋给_data ， 那么二者的内容应该是相等的才是
- 但是现在显然不是，说明这里做了加工
- 为啥他要加工？
- 它加工了就可以做响应式了
- 之前说过，vue的数据代理与 definedProperty 这个API有关
- 那么其内部是如何进行数据代理的呢？
- 如果不使用 vue框架，我们能实现数据代理吗？
- 我们来测试一下
- 按照正常的理解，如果我们需要对age这个属性进行数据代理
- 让页面能够检测到数据的改变，那么就需要使用这个接口（defined......）
- 那么这个接口的调用，需要如下几个配置
- 需要给谁添加属性
- 属性名是什么
- 配置项（getter和setter）
- 那么对getter而言，如果该属性被访问到了，那么就需要返回该属性的值
文章插图
- 对setter而言 ， 当属性值，发生修改，那么将接收到的修改的属性值，重新赋值给该属性
推荐阅读
- 简笔画如何画漫画羊（简笔画羊的画法大全简单)
- 简单的绵羊怎么画（如何画简单的绵羊)
- 如何快速高效地煲耳机（自然煲耳机方法)
- 蓝牙耳机如何煲机（新耳机要如何正确煲机)
- 如何煲机，煲耳机有什么方法（耳机最科学的煲机方法)
- 如何在.NET程序崩溃时自动创建Dump？
- 华为蓝牙耳机如何煲机（华为蓝牙耳机煲机歌单)
- 网络不稳定老是掉线怎么办（网络不稳定如何解决)
- 怎么看主板型号（如何看电脑主板型号)
- 优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载