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 相关文章推荐
jQuery 美元符冲突的解决方法
Mar 28 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
js 数据类型判断的方法
Dec 03 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
Home Coffee Roasting
2021/03/03 咖啡文化
php split汉字
2009/06/05 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python实现静态服务器
2019/09/05 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python日志处理模块logging用法解析
2020/05/19 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
汽车检测与维修专业求职信
2014/07/04 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
赢在中国观后感
2015/06/02 职场文书
金砖之国观后感
2015/06/11 职场文书
心得体会格式及范文
2016/01/25 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
搭建Yolov5服务器
2022/04/30 Servers