监测数据的原理

目录

监测数据的原理

一、更新时的问题

二、Vue检测对象

三、Vue检测数组

3.1 push 添加

3.2 shift 删除

3.3 替换

3.4 原理

四、Vue.set

4.1 追加属性

4.2 案例

五、总结

5.1 代码练习

5.2 总结

一、更新时的问题

为什么我们要研究一下Vue监测数据的原理？

以防我们后续在给data赋值或者修改data中数据时导致修改不成功

比如下面这个例子：

 
人员列表
更改马冬梅信息
{{p.name}}-{{p.age}}-{{p.sex}}
   

当我们点击按钮之后，马冬梅的信息会随之改变

我们不难发现：页面中的内容修改了，Vue中的数据也修改了

  methods: {updateMei(){//this.persons[0].name = '马老师'//this.persons[0].age = 50,//this.persons[0].sex = '男'this.persons[0] ={id:'001',name:'马老师',age:50,sex:'男'}}},

初始界面和上面还是相同的，但是我们点击按钮之后，页面和Vue并没有反应

原因：从代码的层面来说，我们真的把数组中的某个元素修改了，但是Vue并没有检测到

下面的这样图就是很好的证明

我们直接操作的数组的索引值，用赋值的方式去改（具体参照Vue监测数组数据的原理）

数组中 [0] [1] [2].....这种没有和，但是[0] [1]里面的属性有和，比如name、age、sex都会有和

二、Vue检测对象

可以先复习一下这篇文章的数据代理

2.Vue — 模板语法、数据绑定、el与data的写法、数据代理-CSDN博客

vm实例的name和其实都来自_data，_data中的数据来自于我们所传入的配置项data，也就是vm._data=data

加工我们传入的data数据（黄色框）

将我们data中的每一组key-value形成和

vm._data=data

流程图

这个地方为什么要加工一下？

第一步加工data数据后就可以做响应式了。

响应式：数据变了，页面也跟着变就是响应式

当我们修改了_data.name的时候，就会引起name的调用，里面有一个调用可以重新解析模板，生成新旧DOM，新旧DOM对比生成新的页面

三、Vue检测数组

 
、
学校信息
学校名称：{{school.name}}
学校地址：{{school.address}}
校长是:{{school.leader}}
学生信息
添加一个学校信息，默认值是男
学生姓名：{{student.name}}
学生性别：{{student.sex}}
学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}
爱好
{{h}}
朋友们
{{f.name}}---{{f.age}}
   

注意看，我们的爱好写成的是一个数组的形式，我们在下面观察，我们并没有发现爱好的和（如果把爱好的属性写成对象的模式，会有和），那说明我们直接修改数组的话，页面的内容可能不会改变

如下所示，也确实没有改变

修改数组的值可以参考3.1、3.2、3.3

3.1 push 添加

向数据中添加一个数据，就是push

Vue发现我们把数组内容改变了，重新解析模板了，页面就有了一个新的展示

3.2 shift 删除

删除数组中的第一个元素

3.3 替换

参数0 代表数组的下标 ，参数1 代表干掉， 参数‘打台球’代表替换成打台球

3.4 原理

Vue是怎么监视到我们调用push方法的呢？

Vue使用了一个叫包装的方法，我们调用的push已经不是数组中原汁原味的push了

Vue中的push做了两件事

调用原汁原味的push

重新解析模板生成虚拟DOM，渲染界面

左侧是Vue监视的数组的push，右侧是原汁原味中数组的push

Vue对数组的监视是靠包装数组身上常用的操作数据的API实现的

四、Vue.set 4.1 追加属性

我们在代码中没有写某个对象，但是在后期我们想添加上

​

​

​
​

学校名称：{{name}}
学校地址：{{address}}
学生姓名：{{student.name}}
学生年龄：真实{{student.age.rAge}}
学生年龄：对外{{student.age.sAge}}
​
{{f.name}} ---{{f.age}}
​

比如下面这种情形

我们在Vue中给学生添加一个性别，我们不难发现我们新添加的这个性别没有和

那如果我们前期没添加，但是后期又想添加怎么办？

API给我提供了一个Vue.set（,key,val）方法

:我们要往谁的身上追加一个属性

key：往身上加一个什么属性

val:值

或者可以使用vm实例对象的API

vm.$set(,key,val)

完成的事情和Vue.set（,key,val）方法一模一样

当执行Vue.set(vm._data.,'sex','男')后，页面发生了变化

或者使用

Vue.set(vm.,'sex','男')后，页面发生了变化

虽然是后天添加，但是我们依然享有和

4.2 案例

案例：我们要点击一个按钮，给学生追加性别

点击之后 如下所示

 
、
学校信息
学校名称：{{name}}
学校地址：{{address}}
学生信息
添加一个学校信息，默认值是男
学生姓名：{{student.name}}
学生性别：{{student.sex}}
学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}
{{f.name}}---{{f.age}}
   

不难发现，我们上面那个案例成功了

但是！！！！！我们现在要变一下，我们不给data里面的对象追加属性了，我们给data追加！

结论：Vue.set不能给data追加属性（也不能给vm 追加），但是可以给data里面的对象追加属性

五、总结 5.1 代码练习

 
年龄+1岁
添加性别属性，默认值：男
在列表首位添加一个朋友
修改第一个好友的名字
添加一个爱好
修改第一个爱好为：开车
学生信息
学生姓名：{{student.name}}
学生年龄：{{student.age}}
学生性别：{{student.sex}}
爱好
{{h}}
朋友们
{{f.name}}---{{f.age}}
   

5.2 总结

如何监测数组中的数据

通过包裹数组更新元素的方法实现，本质就是做了两件事

在Vue修改数组中的某个元素一定要用如下方法

什么是数据劫持？

比如我们在代码中是这么写的

但是在控制台输出时变成了下面这个样子，这就是数据劫持

变成了和的样子，这种行为就叫做数据劫持

如果我们修改了，就马上被劫持到了，劫持到了后第一件事正常修改数据，第二件事会重新解析模板