【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——数组的深度监听