Vue中使用watch同时监听多个值的实现方法

1.开发环境 vue2
2.电脑系统 windows11专业版
3.在使用vue开发的过程中,我们有时候需要使用到监听watch来获取对应的数据,接下来让我们看一下使用方法和同时监听多个值的使用方法。
4.废话不多说,直接上代码:

watch:{
    "tempUrl"(newValue,oldValue){
            console.log("我是监听的新数据",newValue);
            console.log("我是监听的旧数据",oldValue);
        }
}

这种写法能监听多数据的变化,现在感觉是没有问题的

//当我需要监听多个值变化的时候
watch:{
"tempUrl"(newValue,oldValue){
    console.log("我是监听的新数据",newValue);
    console.log("我是监听的旧数据",oldValue);
 },
"tagNameLists"(newValue,oldValue){
    console.log("我是视频标签显示新数据",newValue);
    console.log("我是视频标签显示旧数据",oldValue);
    // this.getRdata(newValue);
 }
}

//只触发了第一个监听的数据变化,第二个数据变化没有监听多,怎么解决呢?

5.使用computed:

computed:{
        dataChange () {
            const {tempUrl, tagNameLists} = this;
            return {tempUrl, tagNameLists};
        }
    }

watch:{
        dataChange:{
            handler(newValue,oldValue) {
                console.log("监听到了数据的变化",newValue);
            },
            deep: true
        }
    },

这样就实现了监听多个数据变化

6.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。