vue watch监控对象的简单方法示例
更新时间：2021年01月07日 10:26:36 作者：追梦的老头
这篇文章主要给大家介绍了关于vue watch监控对象的简单方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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监控对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ant design vue中table表格滚动加载实现思路
在处理一写数据量特别大的情况下,我们不能把后端的数据一次性全部拿到前端在table表格中展示,为了考虑性能优化,使用了滚动加载表格数据,这篇文章主要介绍了ant design vue中table表格滚动加载实现思路,需要的朋友可以参考下2024-07-07
本文通过实例代码给大家介绍了Vue lazyload图片懒加载的相关知识，通过导入配置等操作src/main.jswenj ,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-12-12
这篇文章主要介绍了Vue-element中el-input输入卡顿问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue文件使用iconfont解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
项目中的联想输入框现在都是采用的el-autocomplete实现的，但是数据增多就会需要做分页处理，本文主要介绍了vue对el-autocomplete二次封装增加下拉分页，感兴趣的可以了解一下2022-03-03
这篇文章主要介绍了vue中eslintrc.js配置最详细介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了vue实现图片裁剪后上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要给大家介绍了关于vue.js如何在网页中实现一个金属抛光质感的按钮的相关资料,文中给出了详细的实例代码以及图文将实现的方法介绍的非常详细,需要的朋友可以参考下2023-04-04
Teleport是一个内置组件,它可以将一个组件内部的一部分模板传送到该组件的 DOM 结构外层的位置去,本文主要介绍了Vue3中Teleport用法小结,感兴趣的可以了解一下2025-04-04
这篇文章主要给大家介绍了关于Vue中$root使用方法及注意事项的相关资料,vue中$root是用来访问根组件的,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论