VUE watch監聽物件
阿新 • • 發佈:2018-12-11
今天在專案實現中遇到了關於在Vue中watch監聽物件失敗的問題,背景是這樣的:
我在VUE元件中的data裡聲明瞭一個空物件:
obj: { }
然後在某一個函式裡面對obj新增某個物件:
obj.name = 'liu'
再在另一個函式裡,對obj的name屬性進行修改
obj.name = 'yang'
監聽函式就是大家所熟知的下面這種寫法:
watch: {
obj: {
handler: function(newValue) {
console.log(newValue);
},
deep: true
}
}
然而,這種方式根本監聽不到obj物件中屬性的改變,因為在data中的obj裡是沒有屬性的,而受現代 JavaScript 的限制 (以及廢棄 Object.observe),Vue 不能檢測到物件屬性的新增或刪除。由於 Vue 會在初始化例項時對屬性執行 getter/setter 轉化過程,所以屬性必須在 data 物件上存在才能讓 Vue 轉換它,這樣才能讓它是響應的。因此,只有把name屬性一開始就放在obj物件裡面才會深度監聽到obj物件中屬性的變化。
上面一種監聽方式也可以寫成下面這種形式:
watch: {
'obj.name' : {
handle(newValue) {
console.log(newValue);
},
deep: true
}
}