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

Little_XM 發布于2019-08-26 18:26 / 2679人閱讀

摘要：鏈接描述問題描述提供了一個方法可以讓使用者去監聽某些內的數據變動，觸發相應的方法，比如第一種解決方案直接對象現在我需要監聽這個，我可以這樣做第二種解決方案里面的設為了，這樣的話，如果修改了這個中的任何一個屬性，都會執行這個方法。

鏈接描述

問題描述

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

GPU云服務器云服務器 js包裝對象中的屬性 vue實例屬性 vue.js 屬性 vue的計算屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110195.html

【Vue原理】Watch - 源碼版

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版今天繼續探索源碼，廢話不寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

Hancock_Xu 2019-08-23 18:32 評論0 收藏0
Vue中watch對象內屬性的方法

摘要：通常寫法是，上述情況里中的屬性可以直接監聽，但是如果需要監聽的數據是對象內的某一屬性值的變化，直接對象是檢測不到變化的，這是因為這個對象的指向并沒有發生改變。不過這樣會造成更多的性能開銷，尤其是對象里面屬性過多，結構嵌套過深的時候。 vue提供了watch方法，用于監聽實例內data數據的變化。通常寫法是： new Vue({ data: { count: 10， ...

OldPanda 2019-08-23 15:05 評論0 收藏0
針對vue wtach一次詳細的剖析

摘要：提問深度與非深度的區別對象與數組與的區別的一個特點是，最初綁定的時候是不會執行的，要等到改變時才執行監聽計算。為一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象適用場景一個數據影響多個數據。提問 1.深度watch與非深度watch的區別；2.watch對象與數組；3.watch與computed的區別； immediate FullNa...

crossoverJie 2019-08-23 18:05 評論0 收藏0
【Vue原理】Watch - 白話版

摘要：而是在初始化時，在讀取了監聽的數據的值之后，便立即調用一遍你設置的監聽回調，然后傳入剛讀取的值設置了時，如何工作我們都知道有一個選項，是用來深度監聽的。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下...

hzx 2019-08-23 18:25 評論0 收藏0
前端面試匯總VUE(二)

摘要：采用了新舊的對比，獲取差異的，最后一次性的更新到真實上。對基本屬性進行監聽對對象進行監聽對對象某一個屬性監聽監聽自定義指令全局指令，第一個參數是指令名，第二個參數是一個對象，對象內部有個的函數，函數里有這個參數，表示綁定了這個指令的元素。 11.vue 虛擬DOM的理解 Web界面由DOM樹(樹的意思是數據結構)來構建，當其中一部分發生變化時，其實就是對應某個DOM節點發生了變化，??...

Sanchi 2019-08-23 18:29 評論0 收藏0