vue watch监控对象的简单方法示例


Posted in Vue.js onJanuary 07, 2021

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监控对象内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 #Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 #Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 #Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
详解Vue2的diff算法
Jan 06 #Vue.js
vuex的使用步骤
Jan 06 #Vue.js
You might like
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php while循环控制的简单实例
2016/05/30 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
nginx 设置多个站跨域
2021/03/09 Servers
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
python遍历文件夹下所有excel文件
2018/01/03 Python
python实现Adapter模式实例代码
2018/02/09 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
应聘面试自我评价
2014/01/24 职场文书
生产厂长岗位职责
2014/02/21 职场文书
房产继承公证书
2014/04/09 职场文书
求职信内容怎么写
2014/05/26 职场文书
邀请函怎么写
2015/01/30 职场文书
丽江古城导游词
2015/02/03 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
导游词幽默开场白
2019/06/26 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers