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 整个数组的话,是能监听到的,但是改变数组里面某一个值,监听不到,很懵)
仅代表个人观点,个人在实践中摸索到的