vue——数组的深度监听

Question

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整个数组的话，是能监听到的，但是改变数组里面某一个值，监听不到，很懵

Answer 1

vue数组更新检测

Answer 2

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

参考Vue官网。

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

Answer 3

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