vue watch監(jiān)聽對象

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

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

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

在監(jiān)聽對象時，監(jiān)聽不到子屬性的變化。

解決方法：

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

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

代碼示例：

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

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

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

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

相關(guān)文章

【Vue原理】Watch - 白話版

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

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

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

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

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

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

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

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

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

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

OldPanda 2019-08-23 15:05 評論0 收藏0