問題描述
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 }, }}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答