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

資訊專欄INFORMATION COLUMN

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

moven_j / 910人閱讀

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

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

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

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

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

響應式原理 - 白話版

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

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

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

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

其實依賴更新挺簡單的，就是兩步

修改屬性值
通知保存的依賴進行更新
重點只需要看 Object.defineProperty 設(shè)置的set 函數(shù)，當給數(shù)據(jù)重賦新值的時候，自然會觸發(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è)置新值的時候，會重新調(diào)用一遍
           childOb = observe(newVal);  
         
            // 觸發(fā)更新
           dep.notify();    
       }    
    }); 
}

依賴更新重點就重在 通知更新

而通知更新的重點，只有一句話，【dep.notify】

所以，我們重點去了解這句話，如何通知，如何更新

好的， dep 在第一篇講過了

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

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

var Dep = function Dep() {    

    this.subs = []; // 依賴存儲器

};

// 遍歷 subs ，逐個通知依賴，就是逐個調(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();
    }
};

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

因為 subs 裝的是 watcher，所以，subs[0].update 就是 watcher.update

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

function Watcher(vm, expOrFn) {    

    this.vm = vm;    

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

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



Watcher.prototype.get = function() {  

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

};

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

看到上面的源碼

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

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

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

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

function Vue(options) {    

    this._init(options);

}

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

Vue.prototype.$mount = function() {

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

    /** 每個實例新建一個watcher，

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

    new Watcher(this,        

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

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

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

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

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

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

更新函數(shù)

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

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

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

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

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

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

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

畫個通知流程圖

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

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

相關(guān)文章

  • 【Vue原理】響應式原理 - 白話版

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

    gggggggbong 評論0 收藏0

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

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

    VincentFF 評論0 收藏0

  • 【Vue原理】Props - 源碼版

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

    light 評論0 收藏0

  • 【Vue原理】NextTick - 源碼版 之 服務Vue

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

    Acceml 評論0 收藏0

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

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

    vvpvvp 評論0 收藏0

發(fā)表評論

0條評論

moven_j

男|高級講師

TA的文章

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