Vue 给对象添加新属性

给data中已知对象obj添加新的属性age，比如：

HTML代码：

{{obj.age}}

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