脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue watch监听多值

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

 更新时间：2023年05月31日 09:16:37   作者：灰太狼的情与殇  
这篇文章主要为大家介绍了Vue中使用watch同时监听多个值的实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

开发环境 vue2

电脑系统 windows11专业版

在使用vue开发的过程中,我们有时候需要使用到监听watch来获取对应的数据,接下来让我们看一下使用方法和同时监听多个值的

使用方法

废话不多说,直接上代码:

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

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

使用computed

computed:{
        dataChange () {
            const {tempUrl, tagNameLists} = this;
            return {tempUrl, tagNameLists};
        }
    }
watch:{
        dataChange:{
            handler(newValue,oldValue) {
                console.log("监听到了数据的变化",newValue);
            },
            deep: true
        }
    },

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

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

以上就是Vue使用watch同时监听多个值的实现方法示例的详细内容，更多关于Vue中 watch监听多值的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论