给data中已知对象obj添加新的属性age,比如:
HTML代码:<p>{{obj.age}}</p>
JS代码:
data(){
obj:{
name: 'Mr.Pan'
}
}
此时的结果会报错,如何添加呢?
Vue不能检测到对象属性的添加或删除,由于Vue在初始化实例时会对属性执行getter/setter转化,所以属性必须在data上才能被执行,这个是响应式的。对于已创建的实例,Vue不允许添加根级别的响应式属性。
解决方法:
方法一、在data中事先声明该属性;
方法二、使用 Vue.set(object, key, value)或 vm.$set(object, key, value) 添加
注意:当需要为已有对象赋予多个新属性时,比如使用Object.assign()或_.extend()时,这样在对象中不会触发更新,我们需要将原对象和需要混合进去的对象一起创建一个新的对象
// 代替 Object.assign(obj1, obj2)
obj = Object.assign({}, obj1, obj2)
更多请跳转Vue官方文档之《深入响应式原理》链接:https://cn.vuejs.org/v2/guide/reactivity.html