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 Event学习第五章 高级事件注册模型
Feb 07 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 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 8小时时间差的解决方法小结
2009/12/22 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Django 框架模型操作入门教程
2019/11/05 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
C语言面试题
2013/05/19 面试题
护士长竞聘书
2014/03/31 职场文书
励志演讲稿200字
2014/08/21 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
导游词范文
2015/02/13 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
Python torch.flatten()函数案例详解
2021/08/30 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers