淺析Vue源碼（八）——依賴收集與監聽

這一章主要講的是在render的時候如何作到對data中元素進行依賴的收集與監聽。

下面讓咱們看看這行代碼：

new Vue({
    template: 
        `<div>
            <span>span1:</span> {{span1}}
            <span>span2:</span> {{span2}}
        <div>`,
    data: {
        span1: 'span1',
        span2: 'span2',
        span3: 'span3'
    }
});
複製代碼

按照以前咱們理解的data中依賴收集與監聽方法進行綁定則會出現一個問題——span3在實際模板中並無被用到，然而當span3的數據被修改的時候（this.span3 = 'span4'）的時候，一樣會觸發span3的setter致使從新執行渲染，這顯然不符合咱們所想要的。

Dep

當對data上的對象進行修改值的時候會觸發它的setter，那麼取值的時候天然就會觸發getter事件，因此咱們只要在最開始初始化的時候進行一次render，那麼全部被渲染所依賴的data中的數據就會被getter收集到Dep的subs中去。在對data中的數據進行修改的時候setter只會觸發Dep的subs的函數。

定義一個依賴收集類Dep。

class Dep {
    constructor () {
        this.subs = [];
    }
    /**進行依賴的收集**/
    addSub (sub: Watcher) {
        this.subs.push(sub)
    }
    /**進行依賴的移除**/
    removeSub (sub: Watcher) {
        remove(this.subs, sub)
    }
    /*Github:https://github.com/answershuto*/
    /**進行依賴的遍歷通知**/
    notify () {
        // stabilize the subscriber list first
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}
function remove (arr, item) {
    if (arr.length) {
        const index = arr.indexOf(item)
        if (index > -1) {
            return arr.splice(index, 1)
    }
}
複製代碼

Watcher

訂閱者，當依賴收集的時候會addSub到sub中，在修改data中數據的時候會觸發dep對象的notify，通知全部Watcher對象去修改對應視圖。

class Watcher {
    constructor (vm, expOrFn, cb, options) {
        this.cb = cb;
        this.vm = vm;

        /*在這裏將觀察者自己賦值給全局的target，只有被target標記過的纔會進行依賴收集*/
        Dep.target = this;
        /*Github:https://github.com/answershuto*/
        /*觸發渲染操做進行依賴收集*/
        this.cb.call(this.vm);
    }

    update () {
        this.cb.call(this.vm);
    }
}
複製代碼

開始依賴收集

class Vue {
    constructor(options) {
        this._data = options.data;
        observer(this._data, options.render);
        let watcher = new Watcher(this, );
    }
}

function defineReactive (obj, key, val, cb) {
    /*在閉包內存儲一個Dep對象*/
    const dep = new Dep();

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            if (Dep.target) {
                /*Watcher對象存在全局的Dep.target中*/
                dep.addSub(Dep.target);
            }
        },
        set:newVal=> {
            /*只有以前addSub中的函數纔會觸發*/
            dep.notify();
        }
    })
}

Dep.target = null;
複製代碼

將觀察者Watcher實例賦值給全局的Dep.target，而後觸發render操做只有被Dep.target標記過的纔會進行依賴收集。有Dep.target的對象會將Watcher的實例push到subs中，在對象被修改出發setter操做的時候dep會調用subs中的Watcher實例的update方法進行渲染。

詳細過程能夠參考我以前寫的淺析Vue源碼（三）—— initMixin(下)，在這裏面具體介紹了Dep,Watcher,defineReactive的方法。

感謝染陌老師提供的思路。 要是喜歡的話能夠給我個star, github