watch的作用:监听vue实例上数据的变动
示例:
queryData: { name: '', creator: '', selectedStatus: '', time: [], },
1、普通的watch
data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } }
2、数组的watch
data() { return { winChips: new Array(11).fill(0) } }, watch: { winChips: { handler(newValue, oldValue) { for (let i = 0; i < newValue.length; i++) { if (oldValue[i] != newValue[i]) { console.log(newValue) } } }, deep: true } }
3、对象的watch
data() { return { bet: { pokerState: 53, pokerHistory: 'local' } } }, watch: { bet: { handler(newValue, oldValue) { console.log(newValue) }, deep: true } }
tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
事例如下:
4、对象具体属性的watch[活用computed]
data() { return { bet: { pokerState: 53, pokerHistory: 'local' } } }, computed: { pokerHistory() { return this.bet.pokerHistory } }, watch: { pokerHistory(newValue, oldValue) { console.log(newValue) } }
总结
到此这篇关于vue watch监控对象的文章就介绍到这了,更多相关vue watch监控对象内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
第二题 2021年4月4日 腾讯笔试编程题第二题 描述 给出一个有0-9的数字组成的字符...
ASP.Net Core的跨域设置比较简单 官方都整合了 具体的参见微软官方文档: https:...
Coonamd 对象定义了将对数据源执行的命令,可以用于查询数据库表并返回一个记录...
本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JS...
XML/HTML Code 复制内容到剪贴板 input id = username name = username type = t...
由于工作所需,最近花时间研究了html转换为pdf的功能。html转换为pdf的关键技术...
常见信号介绍 SIGINT 2 CtrlC时OS送给前台进程组中每个进程 SIGABRT 6 调用abort...
1.有时候,那些清晨时最坚强的人,正是那些夜里哭着哭着睡着的人。 2.总有一个...
作者个人研发的在高并发场景下,提供的简单、稳定、可扩展的延迟消息队列框架,...
当我们学习surface命令时,已经看到了三维作图的一些端倪。在matlab中我么可以调...