标签:分享图片 int 问题 ted i++ 变化 new 计算 title
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)
}
}
标签:分享图片 int 问题 ted i++ 变化 new 计算 title
原文地址:https://www.cnblogs.com/Tohold/p/9072932.html