数据更新关于监视
- 我们之前讲过，我们在data当中配置的属性，最终会挂载在vue实例身上，而data这个配置项，最终也会在vue身上成为一个新的属性 == _data
文章插图
- 当我们在页面DOM当中，去使用data当中的属性的时候，属性值发生变化，页面是不是会自动更新？ 为什么会这样？
- 你可以理解为 Vue底层默认有一个监视器，负责监视这些属性的变化
- 与watch和computed不同，这个监视是全局的，watch与computed是针对单独的，或者一些属性
检测数据的原理这个概念是非常重要的，所以这节课是不能跳过的，否则有一天会为这个行为买单（谢谢，已经买过了）
我们先来做个需求吧，这个需求不演示不行
- 你写一段代码，这个代码你需要修改data当中的数据
- 修改数据的行为，不能被vue检测到，也就是卡bug 。
- 请你实现这个功能
文章插图
文章插图
button按钮呢，设置了一个点击事件，这个点击事件用来单独修改 马冬梅这个对象的信息
文章插图
测试结果可以看到，在这种赋值的情况下，我们成功的对 马冬梅 进行了修改数据
并且在vue当中也能检测到
【19_Vue如何监测到对象类型数据发生改变的？】
文章插图
卡bug，引出问题既然是 对马冬梅进行修改，我们换一种方式来对他进行修改
文章插图
为什么这次数据修改不成功了，这是为什么？
总结
- 当我点击这个按钮的时候，在内存当中，persons[0]的数据确实发生改变了
- 但是，这次修改并没有被vue所检测到
- 至于控制台的数据到底修补修改，取决于你什么时候打开开发者工具
文章插图
vue是如何检测对象数据改变的
- 我们先回顾一下关于vue的数据监测，详细博文
- 我现在data这里有一个属性name和属性persons
文章插图
- 打开控制台，在vue实例身上也有这俩属性
文章插图
- 我们都知道，为什么这俩data当中属性会出现在vue实例身上，是因为做了数据代理
- 在vue身上有个_data，这个下划线data当中包含着我们上图配置的data的所有数据，并且还对这个配置项data做了加工
文章插图
- 因为如果只是 将 data的值，赋给_data，那么二者的内容应该是相等的才是
- 但是现在显然不是，说明这里做了加工
- 为啥他要加工？
- 它加工了就可以做响应式了
- 之前说过，vue的数据代理与 definedProperty 这个API有关
经验总结扩展阅读
- 2023二本理科最吃香的专业 如何选专业
- 新房装修室内风水如何布局 新房装修有哪些风水讲究
- 厨房推拉门如何选择 厨房推拉门吊轨好还是地轨好呢
- 简笔画如何画漫画羊（简笔画羊的画法大全简单)
- 简单的绵羊怎么画（如何画简单的绵羊)
- 如何快速高效地煲耳机（自然煲耳机方法)
- 蓝牙耳机如何煲机（新耳机要如何正确煲机)
- 餐厅空间小如何设计 开门见餐厅的房子如何设计
- 高考如何选大学和专业 有哪些方法
- 厨房橱柜如何设计实用 厨房橱柜设计原则是什么
