vue watch中的immediate和deep的区别

vue使用watch监听拿到props的传值

有时候会出现直接在 watch 里面通过 this.floorData 是无法拿到的，总是显示 undefined。然后需要通过 newVal和oldVal这么处理，才能拿到 floorData 的值。


watch:{
    floorData:(newVal,oldVal) => {
        console.log(newVal);
        this.floorData0 = newVal[0];
        this.floorData1 = newVal[1];
        this.floorData2 = newVal[2];
    }
}

vue中的watch属性deep和immediate区别

deep：其值是 true 或 false ；确认是否深入监听。deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，在页面初始化化时不会触发，只有当值改变时，才会触发。

immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。就是说在页面初始化后会立即执行。


data:{
    a:1,
    b:{
        c:1
    }
 },
 watch:{
    a(val, oldVal){//普通的watch监听
        console.log("a: "+val, oldVal);
    },
    b:{//深度监听，可监听到对象、数组的变化
        handler(val, oldVal){
            console.log("b.c: "+val.c, oldVal.c);
        },
        deep:true //true 深度监听
    }
}

vue

vue watch中的immediate和deep的区别

猜您喜欢

相关推荐