国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Tony_Zby / 626人閱讀

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

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

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

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

今天我們用白話文解讀 computed 的工作原理，輕松快速理解 computed 內(nèi)部工作原理。因為如果你不懂原理，有時候做項目，碰到奇怪的問題，真的不知道怎么回事

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

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

2、computed 如何控制緩存

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

開始我們今天的講解，希望你認真看完會有收獲

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

在這里，我先告訴你，computed 其實是一個 月老，專門牽線

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

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

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

簡單地說

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

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

讀取computed 時，會執(zhí)行你設(shè)置的 get 函數(shù)，但是并沒有這么簡單，因為還有一層緩存的操作

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

Computed 如何控制緩存

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

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

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

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

首先 computed 計算后，會把計算得到的值保存到一個變量中。讀取 computed 時便直接返回這個變量。

當使用緩存時，就直接返回這個變量。當 computed 更新時，就會重新賦值更新這個變量

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

computed 控制緩存的重要一點是 【臟數(shù)據(jù)標志位 dirty】，dirty 是 watcher 的一個屬性

當 dirty 為 true 時，讀取 computed 會重新計算

當 dirty 為 false 時，讀取 computed 會使用緩存

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

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

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

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

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

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

當 A 引用 B 的時候，B 會收集 A 的watcher，不明白的可以參考之前文章

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

場景設(shè)置

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

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

個人假想更新步驟

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

1通知 computed B 更新，然后 computed B 開始重新計算

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

一條鏈式的操作？ C -》 B -》 A 這樣的執(zhí)行順序嗎？

答案：不是

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

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

2通知 頁面 A watcher 進行更新渲染，進而重新讀取 computed B ，然后 computed B 開始重新計算

?為什么 data C 能通知 頁面 A

data C 的依賴收集器會同時收集到 computed B 和 頁面 A 的 watcher

?為什么 data C 能收集到 頁面A 的watcher

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

在 頁面 A 在讀取 computed B 的時候，趁機把 頁面A 介紹給 data C ，于是 頁面A watcher 和 data C 間接牽在了一起，于是 data C 就會收集到 頁面A watcher

至于怎么牽在一起，白話版不會多說，不浪費大家的腦力

?所以computed 如何更新

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

總結(jié)

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105087.html

相關(guān)文章

  • 【Vue原理】Computed - 源碼版

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

    solocoder 評論0 收藏0

  • 【Vue原理】Props - 源碼版

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

    light 評論0 收藏0

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

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

    gggggggbong 評論0 收藏0

  • 【Vue原理】Mixin - 白話版

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

    CollinPeng 評論0 收藏0

  • 【Vue原理】Mixins - 源碼版

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

    gotham 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<