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:newArray(11).fill(0)
}
},
watch:{
winChips:{
handler(newValue,oldValue){
for(leti=0;i
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(){
returnthis.bet.pokerHistory
}
},
watch:{
pokerHistory(newValue,oldValue){
console.log(newValue)
}
}
总结
到此这篇关于vuewatch监控对象的文章就介绍到这了,更多相关vuewatch监控对象内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
热门推荐
10 祝女儿简短祝福语大全
11 大学新年祝福语简短创意
12 元旦适合的祝福语简短
13 朋友出远门祝福语简短
14 初六简短的祝福语
15 祝男孩生日祝福语简短
16 同事调离的祝福语简短
17 拜年红包的祝福语简短
18 妈妈生日祝福语简短励志