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

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。例如：

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

当我们去操作数据发生改变的时候，视图是并不会发送变化的，因为 Vue 会在初始化实例时对属性执行 getter/setter 转化后对数据进行一个实时追踪，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的

对于已经创建的实例，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: '朗诵'
            })
        }
    }
});

这样， data 对象上存在才能让 Vue 将它转换为响应式的。关于具体的 Vue 响应式，MVVM架构，欢迎阅读我的另一篇：《MVC 和 MVVM 架构模式/设计思想》