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)

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注