526互联

vue中watch侦听器，deep和immediate的用法

发布时间 2023-06-28 11:35:36作者: 红石榴21

1、deep深度监听的用法

当监听一个对象时，可能想监听整个对象的变化，而不仅仅是某个属性。但在默认情况下，如果你正在监听formData对象并且修改了formData.username，对应的侦听器并不会触发，它只在formData对象被整个替换时触发。

监听整个对象被称作深度监听，通过将deep选项设置为true来开启这一特性：

 

watch: {
        formData: {
            handler(val, oldVal) {
                console.log(val, oldVal);
            },
            deep: true
        }
}
View Code

 

2、immediate的用法

immediate表示在watch中首次绑定的时候，是否执行handler，当值为true则表示在watch中声明的时候，就立即执行handler方法；当值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。所以当immediate的值为true时，初始化方法在created或者mounted生命周期中就可以不用写了，已经在watch中写过了。

watch: {
    formData: {
        handler(val, oldVal) {
            console.log(val, oldVal);
            this.getInit();
        },
        immediate: true
    }
},
mounted() {
    // this.getInit(); // 不用写初始化函数
}
View Code

鉴定完毕，欢迎友友们一起交流学习！！