寫在前面

因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。

文章的原地址：https://github.com/answershuto/learnVue。

在學習過程中，為Vue加上了中文的注釋https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以對其他想學習Vue源碼的小伙伴有所幫助。

可能會有理解存在偏差的地方，歡迎提issue指出，共同學習，共同進步。

關于Vue.js

Vue.js是一款MVVM框架，上手快速簡單易用，通過響應式在修改數據的時候更新視圖。Vue.js的響應式原理依賴于Object.defineProperty，尤大大在Vue.js文檔中就已經提到過，這也是Vue.js不支持E8 以及更低版本瀏覽器的原因。Vue通過設定對象屬性的 setter/getter 方法來監聽數據的變化，通過getter進行依賴收集，而每個setter方法就是一個觀察者，在數據變更的時候通知訂閱者更新視圖。

將數據data變成可觀察(observable)的

那么Vue是如何將所有data下面的所有屬性變成可觀察的(observable)呢?

function observer(value) { 
    Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) 
} 
 
function defineReactive (obj, key, val, cb) { 
    Object.defineProperty(obj, key, { 
        enumerable: true, 
        configurable: true, 
        get: ()=>{ 
            /*....依賴收集等....*/ 
        }, 
        set:newVal=> { 
            cb();/*訂閱者收到消息的回調*/ 
        } 
    }) 
} 
 
class Vue { 
    constructor(options) { 
        this._data = options.data; 
        observer(this._data, options.render) 
    } 
} 
 
let app = new Vue({ 
    el: '#app', 
    data: { 
        text: 'text', 
        text2: 'text2' 
    }, 
    render(){ 
        console.log("render"); 
    } 
})  

為了便于理解，首先考慮一種最簡單的情況，不考慮數組等情況，代碼如上所示。在initData中會調用observe這個函數將Vue的數據設置成observable的。當_data數據發生改變的時候就會觸發set，對訂閱者進行回調(在這里是render)。

那么問題來了，需要對app._date.text操作才會觸發set。為了偷懶，我們需要一種方便的方法通過app.text直接設置就能觸發set對視圖進行重繪。那么就需要用到代理。

代理

我們可以在Vue的構造函數constructor中為data執行一個代理proxy。這樣我們就把data上面的屬性代理到了vm實例上。

_proxy(options.data);/*構造函數中*/ 
 
/*代理*/ 
function _proxy (data) { 
    const that = this; 
    Object.keys(data).forEach(key => { 
        Object.defineProperty(that, key, { 
            configurable: true, 
            enumerable: true, 
            get: function proxyGetter () { 
                return that._data[key]; 
            }, 
            set: function proxySetter (val) { 
                that._data[key] = val; 
            } 
        }) 
    }); 
}  

我們就可以用app.text代替app._data.text了。