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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
解决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面向对象编程快速入门
2006/10/09 PHP
php whois查询API制作方法
2011/06/23 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php实现简单文件下载的方法
2015/01/30 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
JavaScript导出Excel实例详解
2014/11/25 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
python实现中文文本分句的例子
2019/07/15 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
database面试题
2013/03/28 面试题
亚运会口号
2014/06/20 职场文书
红旗渠导游词
2015/02/09 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android