vue 向对象中添加未在data中声明的属性

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性

• 使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
• 使用 vm.$set 实例方法 this.$set(this.someObject,'b',2)，这也是全局 Vue.set 方法的别名。

如何将 data 属性转换为响应式的？

new Vue({
    data: {
        return {
            user: {
                  username: 'fred',
                  age: 20
            }
        }
    },
    created(){
       this.getData();
    },
    methods: {
        getData(){
            this.$set(this.user, 'habby', {
                one: '游泳',
                two: '朗诵'
            })
        }
    }
});

使用了set之后。再重新打印user对象的话。新属性就会被打印出来了。

效果：

user: {
                  username: 'fred',
                  age: 20,
                  habby: {
                    one: '游泳',
                    two: '朗诵'
                        }
            }

参考：

vue 向对象中添加未在data中声明的属性 - 简书受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。例如： 当我们去操作数据发生改变的时候，视...https://www.jianshu.com/p/468783c65d1f