Vue使用watch監(jiān)聽一個對象中的屬性

Little_XM 發(fā)布于2019-08-26 18:26 / 2740人閱讀

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

鏈接描述

問題描述

Vue提供了一個watch方法可以讓使用者去監(jiān)聽某些data內(nèi)的數(shù)據(jù)變動，觸發(fā)相應(yīng)的方法，比如

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

第一種解決方案：直接對象

現(xiàn)在我需要監(jiān)聽這個queryData，我可以這樣做：

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

第二種解決方案：deep

里面的deep設(shè)為了true，這樣的話，如果修改了這個queryData中的任何一個屬性，都會執(zhí)行handler這個方法。不過其實這樣開銷是蠻大的，尤其是對象里面結(jié)構(gòu)嵌套過深的時候。而且有時候我們就想關(guān)心這個對象中的某個屬性，比如name，這個時候可以這樣

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

第三種解決方案：（computed+watch）

或者還可以這樣巧用計算屬性

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110195.html

相關(guān)文章

【Vue原理】Watch - 源碼版

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

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

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

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

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

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

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

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

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

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