Vue.js依賴收集

羅志環發布于2019-08-20 18:59 / 1500人閱讀

摘要：依賴收集是在響應式基礎上進行的，不熟悉的同學可以先了解響應式原理。定義一個依賴收集類。訂閱者，當依賴收集的時候回到中，在修改中數據的時候會觸發的，從而回調渲染函數。

寫在前面

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

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

為什么要依賴收集

先看下面這段代碼

new Vue({
    template: 
        `
            text1: {{text1}}
            text2: {{text2}}
        `,
    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方法進行渲染。

關于

作者：染陌

Email：answershuto@gmail.com or answershuto@126.com

Github: https://github.com/answershuto

Blog：http://answershuto.github.io/

知乎專欄：https://zhuanlan.zhihu.com/ranmo

掘金： https://juejin.im/user/58f87ae844d9040069ca7507

osChina：https://my.oschina.net/u/3161824/blog

轉載請注明出處，謝謝。

歡迎關注我的公眾號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84987.html

深入淺出Vue響應式原理

摘要：總結最后我們依照下圖參考深入淺出，再來回顧下整個過程在后，會調用函數進行初始化，也就是過程，在這個過程通過轉換成了的形式，來對數據追蹤變化，當被設置的對象被讀取的時候會執行函數，而在當被賦值的時候會執行函數。前言 Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。這使得狀態管理非常簡單直接，不過理解...

yiliang 2019-08-23 18:34 評論0 收藏0
vue.js源碼 - 剖析observer,dep,watch三者關系如何具體的實現數據雙向綁定

摘要：雙向數據綁定的核心和基礎是其內部真正參與數據雙向綁定流程的主要有和基于和發布者訂閱者模式，最終實現數據的雙向綁定。在這里把雙向數據綁定分為兩個流程收集依賴流程依賴收集會經過以上流程，最終數組中存放列表，數組中存放列表。 Vue雙向數據綁定的核心和基礎api是Object.defineProperty,其內部真正參與數據雙向綁定流程的主要有Obderver、Dep和Watcher,基于d...

mo0n1andin 2019-08-22 16:17 評論0 收藏0
從Vue.js源碼角度再看數據綁定

摘要：在學習過程中，為加上了中文的注釋，希望可以對其他想學習源碼的小伙伴有所幫助。數據綁定原理前面已經講過數據綁定的原理了，現在從源碼來看一下數據綁定在中是如何實現的。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/answershuto/le...

elina 2019-08-21 16:16 評論0 收藏0
Vue源碼解析(2)-vue雙向數據綁定原理

摘要：與狀態同步非常困難通過添加觀察者監測變化，如和。應用中狀態的屬性會被監測，當它們發生變化時，只有依賴了發生變化屬性的元素會被重新渲染。現代 js 框架存在的根本原因然而通常人們（自以為）使用框架是因為：它們支持組件化；它們有強大的社區支持；它們有很多（基于框架的）第三方庫來解決問題；它們有很多（很好的）第三方組件;它們有瀏覽器擴展工具來幫助調試；它們適合做單頁應用。 Keeping...

Neilyo 2019-08-23 11:43 評論0 收藏0
Vue2 源碼分析

摘要：應用啟動一般是通過，所以，先從該構造函數著手。構造函數文件該文件只是構造函數，原型對象的聲明分散在當前目錄的多個文件中構造函數接收參數，然后調用。源碼版本：v2.1.10 分析目標通過閱讀源碼，對 Vue2 的基礎運行機制有所了解，主要是： Vue2 中數據綁定的實現方式 Vue2 中對 Virtual DOM 機制的使用方式源碼初見項目構建配置文件為 build/conf...

alin 2019-08-20 14:35 評論0 收藏0