成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

gggggggbong / 2455人閱讀

摘要：所以我今后打算把每一個內(nèi)容分成白話版和源碼版。有什么錯誤的地方，感謝大家能夠指出響應(yīng)式系統(tǒng)我們都知道，只要在實例中聲明過的數(shù)據(jù)，那么這個數(shù)據(jù)就是響應(yīng)式的。什么是響應(yīng)式，也即是說，數(shù)據(jù)發(fā)生改變的時候，視圖會重新渲染，匹配更新為最新的值。

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

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

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

本文打算 白話文的形式講解 Vue 的響應(yīng)式系統(tǒng)原理，盡量不涉及源碼。

只闡述工作流程，不想內(nèi)容過多過于繁雜，導(dǎo)致大家會沒有什么閱讀的興趣。

所以我今后打算把每一個內(nèi)容分成 白話版和 源碼版。

白話版，就是讓大家不用花費太多腦力，不用消耗太多時間，就能輕松地看完并大致了解內(nèi)容。

有時間精力的人可以閱讀源碼版 ，然后自己參考源碼，來進(jìn)行研究學(xué)習(xí)。有什么錯誤的地方，感謝大家能夠指出

響應(yīng)式系統(tǒng)

我們都知道，只要在 Vue 實例中聲明過的數(shù)據(jù)，那么這個數(shù)據(jù)就是響應(yīng)式的。

什么是響應(yīng)式，也即是說，數(shù)據(jù)發(fā)生改變的時候，視圖會重新渲染，匹配更新為最新的值。

也正是因為這個系統(tǒng)，讓我們可以脫離界面的束縛，只需要操作數(shù)據(jù)。

我們可以問出下面三個問題

1、Vue 是怎么知道數(shù)據(jù)改變？

2、Vue 在數(shù)據(jù)改變時，怎么知道通知哪些視圖更新？

3、Vue 在數(shù)據(jù)改變時，視圖怎么知道什么時候更新？

現(xiàn)在，我將會講解三個重要的概念

Object.defineProperty，依賴收集，依賴更新

Object.defineProperty

這個方法，是 Vue 響應(yīng)式系統(tǒng)的精髓，骨髓，腦髓

使用 Object.defineProperty 可以為對象中的每一個屬性，設(shè)置 get 和 set 方法

Object.defineProperty 可以為屬性設(shè)置很多特性，例如 configurable，enumerable，但是現(xiàn)在不過多解釋，重點只放在 get 和 set

那么 get 和 set 方法有什么用？

get 值是一個函數(shù)，當(dāng)屬性被訪問時，會觸發(fā) get 函數(shù)

set 值同樣是一個函數(shù)，當(dāng)屬性被賦值時，會觸發(fā) set 函數(shù)

舉個例子

var obj={    
    name:"神仙朱"
}
Object.defineProperty(obj,"name",{
    get(){        
        console.log("get 被觸發(fā)")
    },
    set(val){        
        console.log("set 被觸發(fā)")
    }
})

當(dāng)我訪問 obj.name 時，會打印 " get 被觸發(fā) "

當(dāng)我為 obj.name 賦值時，obj.name = 5，會打印 " set 被觸發(fā) "

這便可以回答了我開篇的第一個問題

Vue 是怎么知道數(shù)據(jù)改變的呢？

恩，Vue 在 屬性的 set 方法中做了手腳，因而當(dāng)數(shù)據(jù)改變時，觸發(fā) 屬性的 set 方法，Vue 就能知道數(shù)據(jù)有改變

依賴收集

簡單地說

data 中的聲明的每個屬性，都擁有一個數(shù)組，保存著 誰依賴（使用）了 它

舉個例子

new Vue({    
    data(){        
        return {            
            name:"神仙朱"        
        }    
    }
})

然后 頁面A 引用了name

{{name}}

此時，name 把 頁面 A 存在它的后宮中（這個頁面依賴我）

為什么呢？

因為它知道誰依賴它之后，它就可以在發(fā)生改變的時候，通知 依賴它的頁面，從而讓頁面完成更新

TIP

實際上，會依賴 name 的地方，不只是頁面，還會有 computed，watch.... 等等，但是這里我們?nèi)渴褂庙撁嬉辉~替代

這就是依賴收集，把 依賴了我（使用了我的東西），統(tǒng)統(tǒng)保存起來。

可是，保存在哪里，具體保存的是什么東西，我們這里暫時不深入，因為這是白話文。

我按上面的例子，從Vue 內(nèi)部打印一份數(shù)據(jù)供大家簡單了解即可

可以看到，name 屬性，使用了 一個 dep 保存了 頁面A 這個依賴，而保存的實際上是 頁面A的 Watcher。

TIP

簡單說一下，watcher 是什么，每個 Vue 實例都會擁有一個專屬的 watcher，可用于實例更新

總結(jié)一下

1、data 中每個聲明的屬性，都會有一個 專屬的依賴收集器 subs

2、當(dāng)頁面使用到 某個屬性時，頁面的 watcher 就會被 放到 依賴收集器 subs 中

數(shù)據(jù) 是在什么時候進(jìn)行 收集依賴 的呢？

答案是，ObjectdefineProperty - get

當(dāng) 頁面 A 讀取了 name 時，會觸發(fā) name 的 get 函數(shù)，此時，name 就會保存 頁面A 的 watcher 啦！

這便可以回答了我開篇的第二個問題

Vue 在數(shù)據(jù)改變時，怎么知道通知哪些視圖更新？

恩，通知那些存在 依賴收集器中的 視圖

依賴更新

依賴更新，就是，通知所有的依賴進(jìn)行更新

經(jīng)過上面的講解，我們都知道，每個屬性都會保存有一個 依賴收集器 subs

而這個 依賴收集器，是用來在 數(shù)據(jù)變化時，通知更新的

數(shù)據(jù) 是在 什么時候進(jìn)行 依賴更新 的呢？

答案是，Object.defineProperty - set

以上面的 Vue 實例 為例

當(dāng) name 改變的時候，name 會遍歷自己的 依賴收集器 subs，逐個通知 watcher，讓 watcher 完成更新

這里 name 會通知 頁面A，頁面A 重新讀取新的 name ，然后完成渲染

這便可以回答了我開篇的第二個問題

Vue 在數(shù)據(jù)改變時，視圖怎么知道什么時候更新?

恩，在數(shù)據(jù)變化觸發(fā) set 函數(shù)時，通知視圖，視圖開始更新

簡單總結(jié)

1、Object.defineProperty - get ，用于 依賴收集

2、Object.defineProperty - set，用于 依賴更新

3、每個 data 聲明的屬性，都擁有一個的專屬依賴收集器 subs

4、依賴收集器 subs 保存的依賴是 watcher

5、watcher 可用于 進(jìn)行視圖更新

最后

如果發(fā)現(xiàn)有錯誤，說得不對的地方，非常感謝能夠指出，本人會有重謝哈哈哈，非常歡迎一起探討學(xué)習(xí)

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

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

相關(guān)文章

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

    摘要：如果沒有緩存，我們將不可避免的多次執(zhí)行的現(xiàn)在我們要開始講解，是如何判斷是否使用緩存的首先計算后，會把計算得到的值保存到一個變量中。當(dāng)使用緩存時，就直接返回這個變量。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或...

    Tony_Zby 評論0 收藏0

  • 【Vue原理】Props - 源碼版

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

    light 評論0 收藏0

  • 【Vue原理】Props - 白話版

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

    Carl 評論0 收藏0

  • 【Vue原理】Watch - 白話版

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

    hzx 評論0 收藏0

  • 【Vue原理】NextTick - 白話版

    摘要：通常會做很多判斷來選擇存在的類型，比如判斷等是否存在，而選擇他為微任務(wù)類型但是可能宏微任務(wù)最后都是，因為他是保守兼容處理。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關(guān)注公眾號也可以吧 【V...

    zeyu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<