成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【Vue原理】月老Computed - 白話版

Tony_Zby / 636人閱讀

摘要：如果沒有緩存，我們將不可避免的多次執(zhí)行的現(xiàn)在我們要開始講解，是如何判斷是否使用緩存的首先計(jì)算后，會(huì)把計(jì)算得到的值保存到一個(gè)變量中。當(dāng)使用緩存時(shí)，就直接返回這個(gè)變量。

寫文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】月老Computed - 白話版

今天我們用白話文解讀 computed 的工作原理，輕松快速理解 computed 內(nèi)部工作原理。因?yàn)槿绻悴欢?，有時(shí)候做項(xiàng)目，碰到奇怪的問題，真的不知道怎么回事

要理解 computed 的工作原理，只需要理解下面三個(gè)問題

1、computed 也是響應(yīng)式的

2、computed 如何控制緩存

3、依賴的 data 改變了，computed 如何更新

開始我們今天的講解，希望你認(rèn)真看完會(huì)有收獲

“必須有收獲謝謝，不然我不白寫了嗎兄弟”

在這里，我先告訴你，computed 其實(shí)是一個(gè) 月老，專門牽線

computed 也是響應(yīng)式的

什么是響應(yīng)式，不知道的童鞋請(qǐng)參考我以前的文章

【Vue原理】響應(yīng)式原理 - 白話版

簡(jiǎn)單地說

你給 computed 設(shè)置的 get 和 set 函數(shù)，會(huì)跟 Object.defineProperty 關(guān)聯(lián)起來

所以 Vue 能捕捉到 讀取computed 和 賦值computed 的操作

讀取computed 時(shí)，會(huì)執(zhí)行你設(shè)置的 get 函數(shù)，但是并沒有這么簡(jiǎn)單，因?yàn)檫€有一層緩存的操作

賦值 computed 時(shí)，會(huì)執(zhí)行你設(shè)置的 set 函數(shù)，這個(gè)就比較簡(jiǎn)單，會(huì)直接把 set 賦值給 Object.defineProperty - set

Computed 如何控制緩存

我們都知道，computed 是有緩存的，官方已經(jīng)說明

"計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值"

"我們?yōu)槭裁葱枰彺妫考僭O(shè)我們有一個(gè)性能開銷比較大的計(jì)算屬性 A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter"

現(xiàn)在我們要開始講解，Computed 是如何判斷是否使用緩存的

首先 computed 計(jì)算后，會(huì)把計(jì)算得到的值保存到一個(gè)變量中。讀取 computed 時(shí)便直接返回這個(gè)變量。

當(dāng)使用緩存時(shí)，就直接返回這個(gè)變量。當(dāng) computed 更新時(shí)，就會(huì)重新賦值更新這個(gè)變量

TIP:computed 計(jì)算就是調(diào)用 你設(shè)置的 get 函數(shù)，然后得到返回值

computed 控制緩存的重要一點(diǎn)是 【臟數(shù)據(jù)標(biāo)志位 dirty】，dirty 是 watcher 的一個(gè)屬性

當(dāng) dirty 為 true 時(shí)，讀取 computed 會(huì)重新計(jì)算

當(dāng) dirty 為 false 時(shí)，讀取 computed 會(huì)使用緩存

1一開始每個(gè) computed 新建自己的watcher時(shí)，會(huì)設(shè)置 watcher.dirty = true，以便于computed 被使用時(shí)，會(huì)計(jì)算得到值

2當(dāng) 依賴的數(shù)據(jù)變化了，通知 computed 時(shí)，會(huì)設(shè)置 watcher.dirty = true，以便于其他地方重新渲染，從而重新讀取 computed 時(shí)，此時(shí) computed 重新計(jì)算

3computed 計(jì)算完成之后，會(huì)設(shè)置 watcher.dirty = false，以便于其他地方再次讀取時(shí)，使用緩存，免于計(jì)算

依賴的data變化，computed如何更新

首先，data 和 computed 本質(zhì)上差不多，都是數(shù)據(jù)，都需要被使用。

簡(jiǎn)述Vue響應(yīng)式原理

當(dāng) A 引用 B 的時(shí)候，B 會(huì)收集 A 的watcher，不明白的可以參考之前文章

【Vue原理】響應(yīng)式原理 - 白話版

場(chǎng)景設(shè)置

現(xiàn)在 頁(yè)面A 引用了 computed B，computed B 依賴了 data C

像是這樣，A->B->C 的依賴順序

個(gè)人假想更新步驟

一開始我的想法是，data C 開始變化后.......

1通知 computed B 更新，然后 computed B 開始重新計(jì)算

2接著 computed B 通知 頁(yè)面A更新，然后重新讀取 computed

一條鏈?zhǔn)降牟僮鳎?C -》 B -》 A 這樣的執(zhí)行順序嗎？

答案：不是

其實(shí)真正的流程是，data C 開始變化后.......

1通知 computed B watcher 更新，其實(shí)只會(huì)重置 臟數(shù)據(jù)標(biāo)志位 dirty =true，不會(huì)計(jì)算值

2通知 頁(yè)面 A watcher 進(jìn)行更新渲染，進(jìn)而重新讀取 computed B ，然后 computed B 開始重新計(jì)算

?為什么 data C 能通知 頁(yè)面 A

data C 的依賴收集器會(huì)同時(shí)收集到 computed B 和 頁(yè)面 A 的 watcher

?為什么 data C 能收集到 頁(yè)面A 的watcher

這就是 Vue 設(shè)計(jì)的巧妙之處了，也就是我開始講的，computed 其實(shí)是一個(gè) 月老

在 頁(yè)面 A 在讀取 computed B 的時(shí)候，趁機(jī)把 頁(yè)面A 介紹給 data C ，于是 頁(yè)面A watcher 和 data C 間接牽在了一起，于是 data C 就會(huì)收集到 頁(yè)面A watcher

至于怎么牽在一起，白話版不會(huì)多說，不浪費(fèi)大家的腦力

?所以computed 如何更新

被依賴通知更新后，重置 臟數(shù)據(jù)標(biāo)志位 ，頁(yè)面讀取 computed 時(shí)再更新值

總結(jié)

1computed 通過 watcher.dirty 控制是否讀取緩存

2computed 會(huì)讓 【data依賴】 收集到 【依賴computed的watcher】，從而 data 變化時(shí)，會(huì)同時(shí)通知 computed 和 依賴computed的地方

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

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

相關(guān)文章

  • 【Vue原理】Computed - 源碼版

    摘要：被讀取，包裝的函數(shù)觸發(fā)，第一次會(huì)進(jìn)行計(jì)算被調(diào)用，進(jìn)而被調(diào)用，被設(shè)置為，舊值頁(yè)面被緩存起來。計(jì)算會(huì)讀取，此時(shí)就收集到同時(shí)也會(huì)保存到的依賴收集器用于下一步。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下...

    solocoder 評(píng)論0 收藏0

  • 【Vue原理】Props - 源碼版

    寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會(huì)隨著時(shí)間慢慢忘記的。 幸好我做...

    light 評(píng)論0 收藏0

  • 【Vue原理】響應(yīng)式原理 - 白話版

    摘要：所以我今后打算把每一個(gè)內(nèi)容分成白話版和源碼版。有什么錯(cuò)誤的地方，感謝大家能夠指出響應(yīng)式系統(tǒng)我們都知道，只要在實(shí)例中聲明過的數(shù)據(jù)，那么這個(gè)數(shù)據(jù)就是響應(yīng)式的。什么是響應(yīng)式，也即是說，數(shù)據(jù)發(fā)生改變的時(shí)候，視圖會(huì)重新渲染，匹配更新為最新的值。 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 V...

    gggggggbong 評(píng)論0 收藏0

  • 【Vue原理】Mixin - 白話版

    摘要：而我覺得現(xiàn)在出一個(gè)白話版，是讓大家有興趣去研究源碼的時(shí)候，可以提前理清一下思路。相當(dāng)于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內(nèi)部的工作原理。而這個(gè)不會(huì)合并，直接替換掉整個(gè)選項(xiàng) 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版...

    CollinPeng 評(píng)論0 收藏0

  • 【Vue原理】Mixins - 源碼版

    寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】Mixins - 源碼版 今天探索的是 mixins 的源碼，mixins 根據(jù)不同的選項(xiàng)類型會(huì)做不同的處理 篇幅會(huì)有些長(zhǎng)，...

    gotham 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<