vue，watch监听数据，数据监听

三个值：

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) {consle.log(newVal)},deep: true}
}

（3）通过watch监听data数据的变化，数据发生变化时，执行方法

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

2、immediate、handler和deep属性

（1）immediate和handler

在最初绑定值的时候也执行监听，则就需要用到immediate属性。

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

（2）deep

深度监听，监听对象的属性

watch: {docData: {handler(newVal) {console.log(newVal)},deep: true}
}

设置deep:true则可以监听到对象中的属性的变化，例如data.data_id，如果监听整个data那么消耗会大，因此直接监听改变的那个值：

watch: {'data.data_id': {handler(newVal, oldVal) {console.log(newVal)console.log(oldVal)},deep: true}
}

vue，watch监听数据，数据监听相关推荐

vue 监听表格里的数据变化_vue中监听object数据变化的基本原理
# 简略版+自己的注释// 判断一个变量是否是对象 function isObject(obj) { return obj.constructor === Object } class Observe ...
Vue响应式原理Vue中数据的监听
文章目录 Observer理解如上图 Dep「依赖管理」 Watcher理解如上图总结:Vue响应式原理的核心就是Observer.Dep.Watcher. Vue响应式原理理解以后就知道Vue是怎 ...
telegraf监控mysql数据库_influxdb+grafana+telegraf 监听性能数据 (完整详细版)
转载自 https://testerhome.com/topics/21113 概述关于influxdb+grafana的文章,谷歌百度一大把,但是99.9%不知所云,不是这边漏一点就是那边漏一点. ...
wireshark提取流量包中的文件_从Wireshark监听的数据中提取需要的数据
最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处 ...
swoole redis mysql_教你使用swoole监听redis数据
swoole如何监听redis数据? Laravel使用swoole监听redis 开始之前,请先确保redis已经正确安装,并正常运行. Laravel代码在App\Events目录下新建Redi ...
java 监听本地端口_Java-在本地端口上侦听RTP数据包
因此,我目前正在开发一个客户端应用程序,该应用程序在端口5004上侦听RTP数据包.由于可能有多个服务器发送RTP数据包,因此我无法使用套接字连接到特定的远程主机.相反,我尝试了以下方法来侦听本地端口 ...
python应用系列教程——python使用scapy监听网络数据包、按TCP/IP协议进行解析
分享一个朋友的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!大家可以看看是否对自己有帮助:点击打开 docker/kubernetes入门视频教程全栈工程师开发手册 (作者:栾鹏) pyth ...
Layui数据表格监听单元格编辑恢复原值
Layui数据表格监听单元格编辑,并获取原值 table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-fi ...
mysql状态监听_Mysql数据状态监听探讨（攒人品）_MySQL
bitsCN.com 年会前攒人品,你懂得! 应用场景: 长时间运行程序,需要几乎整表查询Mysql,还得在可容忍范围内响应数据变化. 方案一:通过Mysql自带的表更新时间查询方案:SELECT ...
浅析 postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）、使用postMessage的安全注意事项、具体使用方式（父子页面如何互发消息、接收消息）
postMessage 是 html5 引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档.多窗口.跨域消息传递,多用于窗口间数据通信,这也 ...

vue，watch监听数据，数据监听

vue，watch监听数据，数据监听

vue，watch监听数据，数据监听相关推荐

最新文章

热门文章