Vue监视数据的原理

Vue监视数据的原理：

1.Vue会监视data中所有层次的数据。

2.Vue如何检测对象中的数据？

​ 通过setter实现监视，且要在new Vue时就传入要检测的数据。

​ （1）给对象中的后面追加属性，Vue默认组做响应式处理

​ （2）如需要添加响应式属性，请使用如下API：

Vue.set(target,propertyName/数组index,value)
vm.$set(target,propertyName/数组index,value)
1
2

Tip:Vue.set给对象追加一个响应式的数据，不可以直接给data追加属性，只能给data内部的对象追加属性。数组方便记，可以将它看做类数组，本质是一个对象。像0、1为属性key,其值为value,因此该方法写index索引值，就相当于写属性名

3.Vue如何检测数组中的数据？

​ 通过包裹（重写）数组更新的方法来实现的，本质其实做了两件事：

​ （1）调用原生对应的方法对数组进行更新。

​ （2）重新解析模板，进而更新页面

4.在Vue中修改数组中的某个元素一定使用如下方法：

• 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

  Tip:例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。[来自Vue官网]

• Vue.set()或者vm.$set()

Tip:Vue.set（）和vm.$set()不能给vm或者vm的根对象数据（vm._data）添加属性！！！

5.数据劫持

给原来的data添加对应的getter、setter，使之变成响应式数据的操作称为数据劫持。数据劫持，即有人修改数据会被setter监听到，即为劫持。劫持到了之后会更改数据，并重新解析模板

例如：Vue中的data到vm._data的过程