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 到 JQuery (1)学习小结
Feb 12 Javascript
JS继承 笔记
Jul 13 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 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中GET变量的使用
2006/10/09 PHP
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
Vue+Vux项目实践完整代码
2017/11/30 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
使用python分析git log日志示例
2014/02/27 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python多进程读图提取特征存npy
2019/05/21 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
如何基于python操作json文件获取内容
2019/12/24 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
ORACLE十问
2015/04/20 面试题
综合测评自我评价
2015/03/06 职场文书
欠条范文
2015/07/03 职场文书
新年寄语2016
2015/08/17 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS