在Vue2中给data中的属性添加新属性的方法

由于Vue2的双向绑定是基于 Object.defineProperty() 的，这个方法只能监听 data 里面已经存在的属性，并不能对于新添加的属性进行监听，故而直接给data添加新属性是无法被vue监听到并绑定到页面上的。

这里注意：是没办法添加data下的一级属性的，必须事先定义。

下面是几种给data中的属性添加新属性的方法。

$set()

可以使用 Vue.set(target, key, value) 或者 this.$set(target, key, value) 来给data添加新属性。

Object.assign()

可以通过重新赋值的方式添加属性。

example:

data() {
    return {
        msg: {
            name: 'mason',
            age: 22
        }
    }
},

methods: {
    updateMsg() {
        // 右边是一个新的对象，vue检测到msg地址的变化会更新msg
        this.msg = Object.assign({}, this.msg, {gender: 'male'});
    }
}

$forceUpdate()

不建议使用这个方法！

$forceUpdate() 可以强制更新vue实例。

example:

data() {
    return {
        msg: {
            name: 'mason',
            age: 22
        }
    }
},

methods: {
    updateMsg() {
        this.msg.gender = 'male';
        this.$forceUpdate();
    }
}