H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

【Vue】vue——数组的深度监听

vue watch 深度监听数组的变化,试了三种,数组,对象,数组对象,发现只有数组监听不到(监听数组里面某个值变化),代码如下:
add函数调用省略

data:{
temperature:[14,false,15],
suggestion:'夹克长裙',
num:14,
},
methods:{
add:function(){
this.temperature[0]+=5;
}
},
watch:{
'temperature':{
handler:function(newValue,oldValue){
console.log(newValue)
},
deep:true,
}
}

但是如果我在add方法里面直接改temperature整个数组的话,是能监听到的,但是改变数组里面某一个值,监听不到,很懵

回答

vue数组更新检测

首先,Vue.js是基于Object.defineProperty对对象实现“响应式化”,而对于数组,Vue.js提供的方法是重写push、pop、shift、unshift、splice、sort、reverse这七个数组方法。修改数组原型方法的代码可以参考observer/array.js以及observer/index.js

参考Vue官网

如果需要用数组下标修改数组并实现响应式数据变化,Vue.js提供了$set()及$remove()方法

this.temperature.splice(0, 1, this.temperature[0] + 5)

本文地址:H5W3 » 【Vue】vue——数组的深度监听

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址