在vue中如何实现watch监听对象及对应值的变化

下面我就为大家分享一篇vue watch监听对象及对应值的变化详解,具有很好的参考价值,希望对大家有所帮助。

如下所示:

var vm=new Vue({  data:{    a:1,    b:{      c:1    }  },  watch:{    a(val, oldVal){//普通的watch监听      console.log("a: "+val, oldVal);    },    b:{//深度监听,可监听到对象、数组的变化      handler(val, oldVal){        console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的      },      deep:true    }  }})vm.a=2vm.b.c=2

登录后复制

a是一个普通的值,当a的值变化时会被监听到,b是一个对象,不能直接像a那么写,需要深度监听才能捕捉到,但是当我想去捕捉b对象中某一个值的变化时却发现,打印出来的两个值是不一样的,如图:

在vue中如何实现watch监听对象及对应值的变化

这样就只能知道对象发生变化却不知道具体哪个值发生了变化,如果想监听对象某一个值得变化可以利用计算属性computed

立即学习“前端免费学习笔记(深入)”;

var vm=new Vue({  data:{    b:{      c:1    }  },  watch:{    newValue(val, oldVal){      console.log("b.c: "+val, oldVal);    }  },  computed: {    newValue() {      return this.b.c    }  }})vm.b.c=2

登录后复制

用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化,结果如图:

在vue中如何实现watch监听对象及对应值的变化

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

nodejs实现的简单web服务器功能示例

nodejs实现的简单web服务器功能示例

nodejs实现的简单web服务器功能示例

以上就是在vue中如何实现watch监听对象及对应值的变化的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3189343.html

(0)
上一篇 2025年3月31日 23:44:45
下一篇 2025年3月31日 23:44:53

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论