vue watch监听对象及对应值的变化详解


Posted in Javascript onFebruary 24, 2018

如下所示:

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=2
vm.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监听对象及对应值的变化详解

以上这篇vue watch监听对象及对应值的变化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 #Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 #Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
vue cli webpack中使用sass的方法
Feb 24 #Javascript
vue-cli常用设置总结
Feb 24 #Javascript
JS处理一些简单计算题
Feb 24 #Javascript
jQuery 改变P标签文本值方法
Feb 24 #jQuery
You might like
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python字典改变value值方法总结
2019/06/21 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
玲玲的画教学反思
2014/02/04 职场文书
护校行动方案
2014/05/31 职场文书
岗位说明书怎么写
2014/07/30 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python