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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
js实现异步循环实现代码
Feb 16 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
openlayers实现地图测距测面
Sep 25 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
中国第一家无线电行
2021/03/01 无线电
基于mysql的论坛(6)
2006/10/09 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
详解Chai.js断言库API中文文档
2018/01/31 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
tornado框架blog模块分析与使用
2013/11/21 Python
Python批量修改文件后缀的方法
2014/01/26 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Django内容增加富文本功能的实例
2017/10/17 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
会计应届生的自荐信
2013/12/13 职场文书
违纪检讨书2000字
2014/02/08 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
mysql事务隔离级别详情
2021/10/24 MySQL
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python