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

資訊專欄INFORMATION COLUMN

【Vue原理】依賴更新 - 源碼版

moven_j / 899人閱讀

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

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

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

【Vue原理】依賴更新 - 源碼版

如果對(duì)依賴收集完全沒有概念的同學(xué)，可以先看我這篇白話版

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

我們已經(jīng)講過了 依賴收集

【Vue原理】依賴收集 - 源碼版之基本數(shù)據(jù)類型

【Vue原理】依賴收集 - 源碼版之引用數(shù)據(jù)類型

現(xiàn)在就要看依賴更新了哈哈哈，畢竟收集完是要更新的嘛

其實(shí)依賴更新挺簡(jiǎn)單的，就是兩步

修改屬性值
通知保存的依賴進(jìn)行更新
重點(diǎn)只需要看 Object.defineProperty 設(shè)置的set 函數(shù)，當(dāng)給數(shù)據(jù)重賦新值的時(shí)候，自然會(huì)觸發(fā) set 函數(shù)，完成依賴更新

function defineReactive(obj, key, val) {   

    var dep = new Dep(); 
    var childOb = observe(val);   

    Object.defineProperty(obj, key, {

       get(){   
            ... 屬性被讀取，完成依賴收集            
            // 返回閉包值
            return val
       },

       set(newVal) {    
       
            // 值沒有變化
           if (newVal ===val) return
           
           // 修改閉包值
           val = newVal;    
       
            // 如果屬性已經(jīng)存在過，設(shè)置新值的時(shí)候，會(huì)重新調(diào)用一遍
           childOb = observe(newVal);  
         
            // 觸發(fā)更新
           dep.notify();    
       }    
    }); 
}

依賴更新重點(diǎn)就重在 通知更新

而通知更新的重點(diǎn)，只有一句話，【dep.notify】

所以，我們重點(diǎn)去了解這句話，如何通知，如何更新

好的， dep 在第一篇講過了

【Vue原理】依賴收集 - 源碼版之基本數(shù)據(jù)類型

我們知道，dep 主要是存儲(chǔ)依賴的，再看一遍源碼

var Dep = function Dep() {    

    this.subs = []; // 依賴存儲(chǔ)器

};

// 遍歷 subs ，逐個(gè)通知依賴，就是逐個(gè)調(diào)用 watcher.update
Dep.prototype.notify = function() {    

    var subs = this.subs.slice();    

    for (var i = 0, l = subs.length; i < l; i++) {

        subs[i].update();
    }
};

看過了源碼，我們知道了，原來通知更新是【遍歷依賴存儲(chǔ)器】，然后一個(gè)個(gè)【調(diào)用 watcher.update】

因?yàn)?subs 裝的是 watcher，所以，subs[0].update 就是 watcher.update

于是問題又來了，watcher.update 是怎么就更新了？？？

function Watcher(vm, expOrFn) {    

    this.vm = vm;    

    // 保存?zhèn)魅氲母潞瘮?shù)    
    this.getter = expOrFn;

    // 新建 watcher 的時(shí)候，立即執(zhí)行更新函數(shù)
    this.get();
};



Watcher.prototype.get = function() {  

    // 執(zhí)行更新函數(shù)
    this.getter.call(this.vm,this.vm);  

};

Watcher.prototype.update = function() {    
    this.get()
}

看到上面的源碼

1Watcher 新建實(shí)例的時(shí)候，會(huì)保存?zhèn)魅氲暮瘮?shù)（這個(gè)函數(shù)會(huì)作為更新用）

2watcher 實(shí)例有 update 方法，作用是執(zhí)行上一步保存的更新函數(shù)

那么 watcher 是什么時(shí)候開始創(chuàng)建的呢？

以頁面 watcher 舉例，探索整個(gè)實(shí)例構(gòu)建的基本流程

function Vue(options) {    

    this._init(options);

}

Vue.prototype._init = function(options) {
    // ...處理組件選項(xiàng)等
    this.$mount()
}

Vue.prototype.$mount = function() {

    // ...解析template成redner函數(shù)保存

    /** 每個(gè)實(shí)例新建一個(gè)watcher，

           并且利用watcher 保存更新函數(shù) **/

    new Watcher(this,        

        // 這個(gè)函數(shù)是更新函數(shù)，傳入watcher保存下來，用于后面頁面初始化或者頁面更新

        function() {
             /** ...調(diào)用保存的渲染函數(shù)生成VNode，

                          并生成DOM插入頁面中**/
        }
    );
};

看上面的源碼 和注釋大概就可以很清楚了

從 【new Vue】 到 【vm._init】 初始化 到 【vm.$mount】 掛載到頁面，整個(gè)流程就完整了

重點(diǎn)是清楚 watcher的更新函數(shù)

更新函數(shù)

我們可以看到這個(gè)頁面的更新函數(shù)，作用是調(diào)用 渲染函數(shù)，然后生成DOM節(jié)點(diǎn)插入頁面中。

更新函數(shù)會(huì)傳入Watcher ，然后被保存到 watcher 的實(shí)例中

“整個(gè)函數(shù)涉及的源碼很多，但是這里一律而過”

所以，通知更新做了這些工作

1、直接調(diào)用 watcher.update，也就是重新調(diào)用給 watcher 保存的更新函數(shù)

2、更新更新函數(shù)就是執(zhí)行渲染函數(shù)，然后讀取實(shí)例最新的值（已被修改過的值），最后重新生成DOM 節(jié)點(diǎn)

3、DOM 節(jié)點(diǎn) 插入或替換頁面，完成更新

畫個(gè)通知流程圖

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

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

相關(guān)文章

  • 【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原理】依賴收集 - 源碼版之基本數(shù)據(jù)類型

    摘要：當(dāng)東西發(fā)售時(shí)，就會(huì)打你的電話通知你，讓你來領(lǐng)取完成更新。其中涉及的幾個(gè)步驟，按上面的例子來轉(zhuǎn)化一下你買東西，就是你要使用數(shù)據(jù)你把電話給老板，電話就是你的，用于通知老板記下電話在電話本，就是把保存在中。剩下的步驟屬于依賴更新 寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【...

    VincentFF 評(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原理】NextTick - 源碼版 之 服務(wù)Vue

    寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】NextTick - 源碼版 之 服務(wù)Vue 初次看的兄弟可以先看 【Vue原理】NextTick - 白話版 簡(jiǎn)單了解下...

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

  • 【Vue原理】依賴收集 - 源碼版之引用數(shù)據(jù)類型

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

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

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

0條評(píng)論

moven_j

男|高級(jí)講師

TA的文章

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