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