問題描述
Vue提供了一個watch方法可以讓使用者去監聽某些data內的數據變動，觸發相應的方法，比如
queryData: {
name: '',
creator: '',
selectedStatus: '',
time: [],
},
第一種解決方案：直接對象
現在我需要監聽這個queryData，我可以這樣做：
watch: {
queryData: {
handler: function() {
//do something
},
deep: true
}
}
第二種解決方案：deep
里面的deep設為了true，這樣的話，如果修改了這個queryData中的任何一個屬性，都會執行handler這個方法。不過其實這樣開銷是蠻大的，尤其是對象里面結構嵌套過深的時候。而且有時候我們就想關心這個對象中的某個屬性，比如name，這個時候可以這樣
watch: {
'queryData.name': {
handler: function() {
//do something
},
}
}
第三種解決方案：（computed+watch）
或者還可以這樣巧用計算屬性
computed: {
getName: function() {
return this.queryData.name
}
}
watch: {
getName: {
handler: function() {
//do something
},
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
