vue watch物件內的屬性
阿新 • • 發佈:2019-02-07
vue可以通過watch監聽data內資料的變化。通常寫法是:
new Vue({
data: {
a: 100,
msg:{
channel:'音樂',
style:'活潑'
}
},
watch: {
a: function (newval, oldVal) {
console.log('new: %s, old: %s', newval, oldVal)
}
}
})
但是如果你要監聽的資料是物件內的某一屬性,直接watch物件的屬性(eg:msg.channel)就會報錯了
而監聽整個物件的時候(eg:msg)會發現無論何時newval和oldVal的值都是一樣的,這是因為msg這個物件的指向並沒有發生改變,所以需要深度監測
watch: {
msg: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
如果監聽物件內的某一具體屬性,可以通過computed做中間層來實現
computed: {
channel() {
return this.msg.channel
}
},
watch:{
channel(newValue, oldValue) {
console.log('new: %s, old: %s', newval, oldVal)
//這裡面可以執行一旦監聽的值發生變化你想做的操作
}
}