vue -深度监听

vue -深度监听

问题产生的原因:今天在写 uniapp 时，Vue 监听不到数组的对象值得修改,当修改变量的属性时,双向绑定不会重新渲染一遍;

解决 1:在各种论坛查找后无果，我试着改变修改数组的对象值得方法；

这个是需要修改的数组，数组里面是对象，我先把它赋值传递给 tesArr

const testArr = this.modCourse;

修改方法 1

this.modCourse[0] = res.data;
console.log(this.modCourse === testArr)//输出 true，监听未开启

修改方法 2

// 开启vue深度监听数组对象的两种方法
this.modCourse = [res.data];
this.$set(this.modCourse,0,modCourse)
console.log(this.modCourse === testArr)
//输出 false，监听开启，此时修改 v-model 对应的数组对象里面的数据，
页面会开启数据修改的渲染

后来发现这两种修改方法，看似相同，实际上第一种的地址并未改变，第二种的地址改变，同理对于对象的监听也可以采用$set开启响应式监听链接: vue官网检测变化注意事项.

举例

这个博主和我遇到的问题是一样的，但是他在修改数组时使用了我的第一种方法

methods:{
add:function(){
this.temperature[0]+=5;
}
}

也可以用我上面的方法判断其实修改前后 temperature 这个数组对应的第一个地址并未改变，并没有触发 vue 的深度监听

就像这个博主所说（但是如果我在 add 方法里面直接改 temperature 整个数组的话，是能监听到的，但是改变数组里面某一个值，监听不到，很懵）

仅代表个人观点，个人在实践中摸索到的