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 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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缓存技术的多种方法小结
2012/08/14 PHP
php操作access数据库的方法详解
2017/02/22 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
什么是python的id函数
2020/06/11 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
"序列点" 是什么
2016/07/29 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
工作过失检讨书
2014/02/23 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
调研汇报材料范文
2014/08/17 职场文书
法人身份证明书
2014/10/08 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2016新年慰问信范文
2015/03/25 职场文书