vue之this.$set()

我们在使用vue进行项目开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。

这是因为当vue中的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

如下代码，给person对象新增age属性：

data () {
    
    
  return {
    
    
    person: {
    
    
      name: '小明',
      gender: '男'
    }
  }
}
// mounted钩子函数，在实例挂载之后调用，一般用于页面初始化
mounted () {
    
    
  this.person.age = 18
}

当我们在页面上想渲染age属性值时并不能使用，原因是受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，而属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的，所以此时就需要用到 this.$set 。

正确的写法应该是：

mounted () {
    
    
  this.$set(this.person, "age", 18)
}

简单说下 this.$set(target, “key”, “value”) 的三个参数：
① 要改变的目标对象（也可以是数组）

② 要更改的对象中的属性（或者数组中某个元素的索引）

③ 重新赋的值