网络编程
位置：首页>> 网络编程>> JavaScript>> vue watch监控对象的简单方法示例

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

作者：追梦的老头　　发布时间：2024-05-05 09:11:00　

标签：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)
}
}

来源：https://www.cnblogs.com/web-chuanfa/p/9372459.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com