vue 实战问题-watch 数组或者对象
Posted 哓番茄
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 实战问题-watch 数组或者对象相关的知识,希望对你有一定的参考价值。
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 数组或者对象的主要内容,如果未能解决你的问题,请参考以下文章