关于vue.js: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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。