Vue使用watch監聽一個物件中的屬性
阿新 • • 發佈:2018-12-13
問題描述
Vue提供了一個watch方法可以讓使用者去監聽某些data內的資料變動,觸發相應的方法,比如
queryData: {
name: '',
creator: '',
selectedStatus: '',
time: [],
},
現在我需要監聽這個queryData,我可以這樣做:
watch: {
queryData: {
handler: function() {
//do something
},
deep: true
}
}
裡面的deep設為了true,這樣的話,如果修改了這個queryData中的任何一個屬性,都會執行handler這個方法。不過其實這樣開銷是蠻大的,尤其是物件裡面結構巢狀過深的時候。而且有時候我們就想關心這個物件中的某個屬性,比如name,這個時候可以這樣
watch: {
'queryData.name': {
handler: function() {
//do something
},
}
}
或者還可以這樣巧用計算屬性
computed: { getName: function() { return this.queryData.name } } watch: { getName: { handler: function() { //do something }, } }