必看vue2的响应式中添加属性和删除界面不更新的问题

最近在工作中遇到好几个在新增对象字段的时候，总是界面没有更新，但是对象里面数据已加进去了的情况，还有就是数组直接通过下标修改数组，界面也不会自动更新，后面通过查资料才知道原来这个是vue2.0存在的响应式问题，只能通过$set方法，界面才会更新

对象新增属性、删除属性

data(){
    return {
        preson: {
            name: 'aa',
            age: 18,
            hobby: ['学习'， ‘吃饭’]
        }
    }
},

错误的新增示例

这样直接新增属性，界面是不会更新的

methods: {
    addSex(){
        this.person.sex = '女'
    }
}

正确的新增示例

$set方法

$set方法，一共有三个参数：

• 要修改的对象 this.person
• 要对象里面的哪个属性修改或者删除 sex
• 要对象里面的哪个属性修改后的值 女

第一种方法

methods: {
    addSex(){
       this.$set(this.person, 'sex', '女')
    }
}

第二 种方法

imput Vue from 'vue'

methods: {
    addSex(){
       Vue.$set(this.person, 'sex', '女')
    }
}

删除的示例

$delete方法，一共有二个参数：

• 要修改的对象 this.person
• 要对象里面的哪个属性修改或者删除 name

methods: {
    deleteName(){
          this.$delete(this.person, 'name')
    }
}

数组下标修改数组

错误的修改示例

methods: {
    updateHobby(){
         this.person.hobby[0] = '洗澡'
    }
}

正确的示例

methods: {
    updateHobby(){
         this.$set(this.person.hobby, 0 '洗澡')
    }
}

总结

多学、多看、多做、多总结、多分享，这样技术才会越来越好，