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

划重点：由于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
    }    
}
复制代码