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

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

鉴定完毕,欢迎友们一起交流学习!!

 

posted @ 2023-06-28 11:34  红石榴21  阅读(473)  评论(0编辑  收藏  举报