VUE的watch高阶使用

最新推荐文章于 2025-05-19 16:22:15 发布

程序员劝退师-TAO

最新推荐文章于 2025-05-19 16:22:15 发布

阅读量257

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # VUE

本文链接：https://blog.csdn.net/CSDN877425287/article/details/115708996

VUE 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何在Vue组件中实现立即执行的watch，深度监听对象属性变化，并演示了如何设置多个方法触发。通过实例展示了如何优雅地处理数据监听需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

立即执行

watch是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 watch 能够立即执行
可能想到的的方法就是在create生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法

export default {
    data() {
        return {
            name:  Joe
        }
    },
    watch: {
        name: {
            handler:  sayName ,
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

深度监听

在监听对象时，对象内部的属性被改变时无法触发watch，我们可以为其设置深度监听

export default {
    data: {
        studen: {
            name:  Joe ,
            skill: {
                run: {
                    speed:  fast
                }
            }
        }
    },
    watch: {
        studen: {
            handler:  sayName ,
            deep: true
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

触发监听执行多个方法

使用数组可以设置多项，形式包括字符串、函数、对象

export default {
    data: {
        name:  Joe
    },
    watch: {
        name: [
             sayName1 ,
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler:  sayName3 ,
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log( sayName1==> , this.name)
        },
        sayName2() {
            console.log( sayName2==> , this.name)
        },
        sayName3() {
            console.log( sayName3==> , this.name)
        }
    }
}