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之六 缓存数据功能介绍
Jun 21 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
js实现汉字排序的方法
Jul 23 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
微信小程序实现弹出层效果
May 26 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
javascript实现简易的计算器
Jan 17 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项目打包方法
2008/02/18 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP7 新增功能
2021/03/09 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
Vuex简单入门
2017/04/19 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
es6数值的扩展方法
2019/03/11 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python库matplotlib绘制坐标图
2019/10/18 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python常用编译器原理及特点解析
2020/03/23 Python
简单了解Django项目应用创建过程
2020/07/06 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
C语言笔试题回忆
2015/04/02 面试题
高考自主招生自荐信
2013/10/20 职场文书
总经理助理的八要求
2013/11/12 职场文书
合同专员岗位职责
2013/12/18 职场文书
上课迟到检讨书
2014/01/19 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python