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 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Vue.js基础知识小结
Jan 13 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
一个PHP日历程序
2006/12/06 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
php缓存技术详细总结
2013/08/07 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
详解python和matlab的优势与区别
2019/06/28 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
揠苗助长教学反思
2014/02/04 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
群众路线调研报告范文
2014/11/03 职场文书
学生检讨书
2015/01/27 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
在人间读书笔记
2015/06/30 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
SQL Server中锁的用法
2022/05/20 SQL Server