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 相关文章推荐
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
微信小程序开发探究
Dec 27 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
vue2配置scss的方法步骤
Jun 06 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中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JS backgroundImage控制
2009/05/19 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
javascript history对象详解
2017/02/09 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
学术会议欢迎词
2014/01/09 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server