如果你覺得排版難看，請點選 下面連結 或者 拉到 下面關注公眾號也可以吧

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

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

響應式原理 - 白話版

我們已經講過了 依賴收集

【Vue原理】依賴收集 - 原始碼版之基本資料型別

【Vue原理】依賴收集 - 原始碼版之引用資料型別

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

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

修改屬性值 通知儲存的依賴進行更新 重點只需要看 Object.defineProperty 設定的set 函式，當給資料重賦新值的時候，自然會觸發 set 函式，完成依賴更新

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;    
       
            // 如果屬性已經存在過，設定新值的時候，會重新呼叫一遍
           childOb = observe(newVal);  
         
            // 觸發更新
           dep.notify();    
       }    
    }); 
}
 

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

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

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

好的， dep 在第一篇講過了

【Vue原理】依賴收集 - 原始碼版之基本資料型別

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

var Dep = function Dep() {    

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

};

// 遍歷 subs ，逐個通知依賴，就是逐個呼叫 watcher.update
Dep.prototype.notify = function() {    

    var subs = this.subs.slice();    

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

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

看過了原始碼，我們知道了，原來通知更新是【遍歷依賴儲存器】，然後一個個【呼叫 watcher.update】

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

於是問題又來了，watcher.update 是怎麼就更新了？？？

function Watcher(vm, expOrFn) {    

    this.vm = vm;    

    // 儲存傳入的更新函式    
    this.getter = expOrFn;

    // 新建 watcher 的時候，立即執行更新函式
    this.get();
};



Watcher.prototype.get = function() {  

    // 執行更新函式
    this.getter.call(this.vm,this.vm);  

};

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

看到上面的原始碼

1Watcher 新建例項的時候，會儲存傳入的函式（這個函式會作為更新用）

2watcher 例項有 update 方法，作用是執行上一步儲存的更新函式

那麼 watcher 是什麼時候開始建立的呢？

以頁面 watcher 舉例，探索整個例項構建的基本流程

function Vue(options) {    

    this._init(options);

}

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

Vue.prototype.$mount = function() {

    // ...解析template成redner函式儲存

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

           並且利用watcher 儲存更新函式 **/

    new Watcher(this,        

        // 這個函式是更新函式，傳入watcher儲存下來，用於後面頁面初始化或者頁面更新

        function() {
             /** ...呼叫儲存的渲染函式生成VNode，

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

看上面的原始碼 和註釋大概就可以很清楚了

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

重點是清楚 watcher的更新函式

更新函式

我們可以看到這個頁面的更新函式，作用是呼叫 渲染函式，然後生成DOM節點插入頁面中。

更新函式會傳入Watcher ，然後被儲存到 watcher 的例項中

“整個函式涉及的原始碼很多，但是這裡一律而過”

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

1、直接呼叫 watcher.update，也就是重新呼叫給 watcher 儲存的更新函式

2、更新更新函式就是執行渲染函式，然後讀取例項最新的值（已被修改過的值），最後重新生成DOM 節點

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

畫個通知流程圖

相關推薦