vue无法检测数组或对象内部数据变动的解决办法

967 阅读1分钟

划重点:由于javascript的限制,修改data对象内部某个数据后,并不会触发视图更新,

原因: ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。换句话说,vue对象内部不会设置访问器(观察者),你要改变他让它触发视图更新,可以手动调用this.$set()

data () {
    return {
        student: {
            name: ''
        },
        teach:["李磊"]
    }
}

---手动分割线---

我们在this.student.name="XXX"之后,并不会触发视图更新

第一种办法嚎+写法

 this.$set(this.student,"name", "王二小")//对象写法
 this.$set(this.teach,0, “韩梅梅”) //数组写法

第二种办法deep,文档还有另外两种写法,可自行查阅

//组件内写法
watch:{
    student:{
       handler:(n,o)=>{
           //逻辑处理
       },
       deep:true
    }    
}