VUE的watch监听多个变量

最新推荐文章于 2024-07-19 15:53:40 发布

程序员劝退师-TAO

最新推荐文章于 2024-07-19 15:53:40 发布

阅读量1.6k

点赞数

分类专栏： # VUE

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

版权

VUE 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

本文介绍了在Vue.js中如何通过计算属性来监听多个变量的变化。通过创建一个计算属性msgObj，该属性返回需要监听的msg1和msg2变量，然后在watch对象中深度监听msgObj，从而在msg1或msg2变化时触发相应的处理函数。

摘要由CSDN通过智能技术生成

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
        }
    }
}