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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue如何清空对象
Mar 03 Vue.js
关于Vue中的options选项
Mar 22 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使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
Python selenium如何设置等待时间
2016/09/15 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python和Bash结合在一起的方法
2020/11/13 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
关于打架的检讨书
2014/01/17 职场文书
中学生自我评价范文
2014/02/08 职场文书
积极向上的团队口号
2014/06/06 职场文书
活动总结新闻稿
2014/08/30 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis