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

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

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

鏈接描述

問題描述

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

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

第一種解決方案：直接對(duì)象

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

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

第二種解決方案：deep

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

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

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

或者還可以這樣巧用計(jì)算屬性

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110195.html

相關(guān)文章

【Vue原理】Watch - 源碼版

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

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

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

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

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

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

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

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

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

Sanchi 2019-08-23 18:29 評(píng)論0 收藏0