Vue数据劫持详解

数据劫持

• Vue在把data赋值给_data之前，先对data做了数据劫持

• 目的：让对data的修改触发对应的setter，实现响应式

• data

• 数据劫持后的data
  

如果data对象中的属性是对象

• Vue会给这个属性及其属性（如果是对象，依旧按这个逻辑）添加响应式的setter和getter

如果data对象中的属性是数组

• Vue会只给这个属性添加响应式的setter和getter，而不会给数组的元素添加

Vue2对追加的属性做响应式

• Vue.set( target, propertyName/index, value )

• vm.$set( target, propertyName/index, value )

• 在创建Vue实例之后，只有通过Vue.set()或vm.$set()追加的属性，Vue才做响应式处理

• note：target不能是Vue 实例，或者 Vue 实例的根数据对象（即data，_data）

修改数组中的元素

1. 使用Vue.set()或vm.$set()
2. 使用API：push()，pop()，unshift()，splice()，sort()，reverse()

这些API 是Vue对JS原生的进行了封装

为什么要做数据劫持?

• 保证Vue能够监测到data中所有的数据的变化，实现响应式

当你修改_data中的属性时，

1. _data中对应的setter会被执行，
2. 当执行setter时，一个重新解析模板的方法会被调用
3. 生成新的虚拟DOM
4. 新旧虚拟DOM进行对比
5. 更新页面 （形成了一个闭环）