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 相关文章推荐
Bootstrap每天必学之表格
Nov 23 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
详解vue 命名视图
Aug 14 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
vue实现数据控制视图的原理解析
Jan 07 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
如何在PHP中进行身份认证
2006/10/09 PHP
PHP的博客ping服务代码
2012/02/04 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
vue快捷键与基础指令详解
2017/06/01 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
Python读写Excel文件的实例
2013/11/01 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
css sprite简单实例
2016/05/23 HTML / CSS
CSS3实现时间轴效果
2016/07/11 HTML / CSS
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
音乐学专业求职信
2014/07/22 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
公积金具结保证书
2015/05/11 职场文书
Golang jwt身份认证
2022/04/20 Golang