vue中的watch监听数据变化及watch中各属性的详解


Posted in Javascript onSeptember 11, 2018

首先确认 watch是一个对象,一定要当成对象来用。 

对象就有键,有值。

键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。

值也可以是函数名:不过这个函数名要用单引号来包裹。 

 第三种情况厉害了。

值是包括选项的对象:选项包括有三个。

1.第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
2.第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
3.第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

1、watch使用的几种方法

(1)通过watch监听data数据的变化,数据发生变化时,就会打印当前的值

watch: {
  data(val, newval) {
    console.log(val)
    console.log(newval)
  }
 }

(2)通过watch监听docData数据的变化,数据发生变化时,this.change_number++(使用深度监听)

watch: {
  docData: {
   handler(newVal) {
    this.change_number++
   },
   deep: true
  }
}

(3)通过watch监听data数据的变化,数据发生变化时,执行changeData方法

watch: {
  data: 'changeData' // 值可以为methods的方法名
},
methods: {
   changeData(curVal,oldVal){
    conosle.log(curVal,oldVal)

}
}

2、详解watch中的immediate、handler和deep属性

(1)immediate和handler

这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

eg:

watch: {
   docData: {
    handler(newVal) {
      this.change_number++
    },
    immediate: true
   }
}

(2)deep

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。

eg:
data() {
  return {
    docData: {
      'doc_id': 1,
      'tpl_data': 'abc'
    }
  }
},
watch: {
   docData: {
    handler(newVal) {
      this.change_number++
    },
    deep: true
  }  
}

设置deep:true则可以监听到docData.doc_id的变化,此时会给docData的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

eg:
data() {
  return {
    docData: {
      'doc_id': 1,
      'tpl_data': 'abc'
    }
  }
},
watch: {
  'docData.doc_id': {
    handler(newVal, oldVal) {
      ......
    },
    deep: true
  }  
}

这样只会给对象的某个特定的属性加监听器

3、总结

数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。

以上所述是小编给大家介绍的vue中的watch监听数据变化及watch中各属性的详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 #Javascript
js监听html页面的上下滚动事件方法
Sep 11 #Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 #Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 #Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 #Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 #Javascript
Webpack之tree-starking 解析
Sep 11 #Javascript
You might like
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
php数组去除空值函数分享
2015/02/02 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
行政总经理岗位职责
2013/12/05 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
2015年度党员个人总结
2015/02/14 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
任命书格式模板
2015/09/22 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers