Vue.js 依賴收集

染陌同學發表於2017-08-28

寫在前面

因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js原始碼，並做了總結與輸出。
文章的原地址：github.com/answershuto…。
在學習過程中，為Vue加上了中文的註釋github.com/answershuto…，希望可以對其他想學習Vue原始碼的小夥伴有所幫助。
可能會有理解存在偏差的地方，歡迎提issue指出，共同學習，共同進步。

依賴收集是在響應式基礎上進行的，不熟悉的同學可以先了解《響應式原理》。

為什麼要依賴收集

先看下面這段程式碼

new Vue({
    template: 
        `<div>
            <span>text1:</span> {{text1}}
            <span>text2:</span> {{text2}}
        <div>`,
    data: {
        text1: 'text1',
        text2: 'text2',
        text3: 'text3'
    }
});複製程式碼

按照之前《響應式原理》中的方法進行繫結則會出現一個問題——text3在實際模板中並沒有被用到，然而當text3的資料被修改的時候（this.text3 = 'test'）的時候，同樣會觸發text3的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)
    }

    notify () {
        // stabilize the subscriber list first
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}複製程式碼

Watcher

訂閱者，當依賴收集的時候會addSub到sub中，在修改data中資料的時候會觸發Watcher的notify，從而回撥渲染函式。

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

        /*在這裡將觀察者本身賦值給全域性的target，只有被target標記過的才會進行依賴收集*/
        Dep.target = this;

        /*觸發渲染操作進行依賴收集*/
        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方法進行渲染。