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

問題描述

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
         },
     }
}