vue 中watch 的那些骚操作

最新推荐文章于 2025-11-17 16:31:24 发布

原创最新推荐文章于 2025-11-17 16:31:24 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-watch

vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Vue.js中watch的使用技巧，包括如何设置立即执行、深度监听对象属性变化，以及如何在一个watcher中触发多个方法。通过实例展示了如何在组件创建后立即触发watch，监听并处理对象内部属性的变更，以及如何通过数组形式设置多个回调函数。同时，还探讨了如何监听多个变量的方法，通过计算属性包装多个变量并进行深度监听。

watch用法大全

场景1:

立即执行
watch 是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 watch 能够立即执行

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

	}


}

场景2

深度监听
在监听对象时，对象内部的属性被改变时无法触发 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)
        }
    }
}

场景4

watch监听多个变量
watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象，再监听这个对象来实现“监听多个变量”

export default {
    data() {
        return {
            msg1:  apple ,
            msg2:  banana
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log( msg1 is change )
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log( msg2 is change )
                }
            },
            deep: true
        }
    }
}