vue watch監(jiān)聽(tīng)對(duì)象

VioletJack 發(fā)布于2019-08-26 13:47 / 2366人閱讀

摘要：下面說(shuō)下在項(xiàng)目中遇到的監(jiān)聽(tīng)對(duì)象的問(wèn)題。問(wèn)題在監(jiān)聽(tīng)對(duì)象時(shí)，監(jiān)聽(tīng)不到子屬性的變化。解決方法新增一個(gè)關(guān)于對(duì)象的計(jì)算屬性，切將對(duì)象轉(zhuǎn)換成字符串。

在vue項(xiàng)目中，我們經(jīng)常會(huì)用到監(jiān)聽(tīng)watch。下面說(shuō)下在項(xiàng)目中遇到的監(jiān)聽(tīng)對(duì)象的問(wèn)題。
問(wèn)題：

在監(jiān)聽(tīng)對(duì)象時(shí)，監(jiān)聽(tīng)不到子屬性的變化。

解決方法：

新增一個(gè)關(guān)于對(duì)象的計(jì)算屬性，切將對(duì)象轉(zhuǎn)換成字符串。

監(jiān)聽(tīng)此計(jì)算屬性

代碼示例：

watch: {
    pluginsDataChange (newval, oldval) {
        this.num++
    }
},
computed: {
    pluginsDataChange () {
        return JSON.stringify(this.pluginsData)
    }
},

GPU云服務(wù)器云服務(wù)器 javascript監(jiān)聽(tīng)對(duì)象 watching watche watch

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109518.html

相關(guān)文章

【Vue原理】Watch - 白話版

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

hzx 2019-08-23 18:25 評(píng)論0 收藏0
【Vue原理】Watch - 源碼版

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

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

摘要：提問(wèn)深度與非深度的區(qū)別對(duì)象與數(shù)組與的區(qū)別的一個(gè)特點(diǎn)是，最初綁定的時(shí)候是不會(huì)執(zhí)行的，要等到改變時(shí)才執(zhí)行監(jiān)聽(tīng)計(jì)算。為一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象適用場(chǎng)景一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)。提問(wèn) 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的computed和watch的細(xì)節(jié)全面分析

摘要：定義是一個(gè)計(jì)算屬性類似于過(guò)濾器對(duì)綁定到的數(shù)據(jù)進(jìn)行處理用法不可在里面定義如果定義會(huì)報(bào)如下圖片的錯(cuò)誤因?yàn)閷?duì)應(yīng)的作為計(jì)算屬性定義并返回對(duì)應(yīng)的結(jié)果給這個(gè)變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計(jì)算并返回當(dāng)前 1.computed 1.1 定義是一個(gè)計(jì)算屬性,類似于過(guò)濾器,對(duì)綁定到view的數(shù)據(jù)進(jìn)行處理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 評(píng)論0 收藏0
Vue的computed和watch的細(xì)節(jié)全面分析

摘要：定義是一個(gè)計(jì)算屬性類似于過(guò)濾器對(duì)綁定到的數(shù)據(jù)進(jìn)行處理用法不可在里面定義如果定義會(huì)報(bào)如下圖片的錯(cuò)誤因?yàn)閷?duì)應(yīng)的作為計(jì)算屬性定義并返回對(duì)應(yīng)的結(jié)果給這個(gè)變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計(jì)算并返回當(dāng)前 1.computed 1.1 定義是一個(gè)計(jì)算屬性,類似于過(guò)濾器,對(duì)綁定到view的數(shù)據(jù)進(jìn)行處理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 評(píng)論0 收藏0
Vue中watch對(duì)象內(nèi)屬性的方法

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

OldPanda 2019-08-23 15:05 評(píng)論0 收藏0