vue数据监视原理

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

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

通过setter实现监视，且要在new Vue时就传入要监测的数据。
（1）对象中后追加的属性，vue默认不做响应式处理
（2）如果需要给后添加的属性做响应式，使用如下API：

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

有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

3. 如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事情：
（1）调用原生对应的方法对数组进行更新。
（2）重新解析模板，进而更新页面。

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

（1）使用这些API：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
（2）Vue.set() 或 vm.$set()
（3）如果使用非变更方法（如filter(), concat(), slice() 不会改变原数组）时，可以用新数组替换旧数组

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据（vm._data）对象添加属性。