Vue使用watch監聽一個對象中的屬性

問題描述

Vue提供了一個watch方法能夠讓使用者去監聽某些data內的數據變更，觸發相應的方法，好比

 queryData: {
     name: '',
     creator: '',
     selectedStatus: '',
     time: [],
 },

注： 下面watch後的函數上均可以拿到 新值和老值  function(val, oldVal){ /*do something*/} 

如今我須要監聽這個queryData，我能夠這樣作：

watch: {
     queryData: {
         handler: function() {
            //do something
         },
         deep: true
     }
}

裏面的deep設爲了true，這樣的話，若是修改了這個queryData中的任何一個屬性，都會執行handler這個方法。不過其實這樣開銷是蠻大的，尤爲是對象裏面結構嵌套過深的時候。並且有時候咱們就想關心這個對象中的某個屬性，好比name，這個時候能夠這樣

watch: {
     'queryData.name': {
         handler: function() {
            //do something
         },
     }
}

也能夠這樣寫：

watch: {
     'queryData.name':  function() {
            //do something
      },
     
}

或者還能夠這樣巧用計算屬性

computed: {
    getName: function() {
        return this.queryData.name
    }
}
watch: {
     getName: {
         handler: function() {
            //do something
         },
     }
}

 

轉載地址： https://blog.csdn.net/u014298440/article/details/82942680