vue 實戰問題-watch 數組或者對象
阿新 • • 發佈:2018-05-22
計算 技術 hist i++ ray 計算屬性 for img true
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 數組或者對象