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)对象添加属性。