监视数据原理

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

监视对象

通过setter实现监视, 且要在new Vue时就传入要监视的数据

• 通过obj.xxx添加的属性, Vue默认不做响应式处理
• 如需给后添加的属性做响应式, 需要使用如下API:

Vue.set(target, key, value)
vm.$set(target, key, value)

监视数组

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

• 调用原生对应的方法对数组进行处理更新
• 重新解析模板, 进而更新页面

在 Vue 中修改数组

相关API:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
• Vue.set(target, key, value)或vm.$set(target, key, value)

特别注意

• Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性
• 将Vue实例中的data改为_data中的数据及getter和setter的形式叫做数据劫持