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