Vue this.$set给vue对象动态添加新属性

Vue this.$set给vue对象动态添加新属性，并实时更新视图

// 语法：
this.$set(target, key, value)
// target为需要添加属性的对象，key是要添加的属性名，一般是字符串形式，也可以是数字，value为属性key对应的值。

有时候我们定义在data()方法中的对象，在额外处理的时候可能需要，动态给它添加某些属性，这个时候我们直接
this.obj.xxx = ‘xxx’
发现这种写法是不行的，视图没有更新：
原因：只有预先初始化，定义在data()函数中的属性，对象，vue实例在初始化的时候会触发object.defineProperty()的方法，为每个属性和对象增加getter(),setter()方法，这样，这些属性和对象是受vue实例统一管理的，当修改某一个属性的时候，vue实例会监听它们的变化，进而触发dom更新视图
所以你额外去添加一个新的属性到对象上，vue实例监听不到这些动作，自然不会触发视图更新了。

// 1.添加单个属性

this.$set(this.data, 'key', value)  // 注意这里的key是字符串的形式
// 对于数组
Vue.set(vm.items, indexOfItem, newValue)
this.$set(this.arr, 0, "age"); // 改变数组
this.$set(this.obj, "c", "gender"); // 改变对象
// Vue可以监测到数组变化的，数组原生方法:
// splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
const newArr = arr.splice(index, howmany, item1, item2, ...)
// index. 添加或删除的位置
// howmany 删除的数量
// item1, item2 被添加的元素

// 添加多个属性,应该用两个对象
this.obj = Object.assign({}, this.obj, {age: 20, gender: 'male'})
// 或
this.user = Object.assign( {}, this.user, {
  age: 20,
  gender: 'male'
})