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) // 长度改变,视图更新
},

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐