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 相关文章推荐
20个实用的JavaScript技巧分享
Nov 28 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 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
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
使用js实现的简单拖拽效果
2015/03/18 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
jQuery zTree插件使用简单教程
2019/08/16 jQuery
纯js+css实现在线时钟
2020/08/18 Javascript
python正则表达式的使用
2017/06/12 Python
浅谈Python反射 & 单例模式
2019/03/21 Python
python Pillow图像处理方法汇总
2019/10/16 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
韩国现代百货官网:Hmall
2018/03/21 全球购物
银行求职推荐信范文
2013/11/30 职场文书
前台文员职责范本
2014/03/07 职场文书
会计电算化专业求职信
2014/06/10 职场文书
学校安全责任书范本
2014/07/23 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
工作散漫检讨书
2014/09/16 职场文书
办理护照工作证明
2014/10/10 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android