vue $set使用

1、对象中

如果在data中没有定义对象中某些属性，对象新增某些属性时，使用赋值办法，能改变数据，但视图不更新。

遇到这种情况，使用set方法，既能改变数据，也能更新视图

简单的例子

data () {
    return {
        person: {
            name: '',
            sex: ''
        }
    }
}
//  正确写法：this.$set(this.data,”key”,value’)

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

2、数组中

如果想根据数组索引通过赋值改变该索引下的值，则数据改变，视图不更新

如果通过赋值改变数组长度，则数据改变，但视图不更新

data(){
  car:['oen','green','new']
},
mounted(){
  this.car[1] = 'red' // 数据改变，但视图不更新
  this.car.length = 2 //  数据改变，但视图不更新
 
  // 使用set方法
  this.$set(this.car,1,'red') // 数据改变，视图更新
  this.car.splice(2) // 长度改变，视图更新
},