前言

雖然工作中一直使用Vue作為基礎庫，但是對于其實現機理僅限于道聽途說，這樣對長期的技術發展很不利。所以最近攻讀了其源碼的一部分，先把雙向數據綁定這一塊的內容給整理一下，也算是一種學習的反芻。

本篇文章的Vue源碼版本為v2.2.0開發版。

Vue源碼的整體架構無非是初始化Vue對象，掛載數據data/props等，在不同的時期觸發不同的事件鉤子，如created() / mounted() / update()等，后面專門整理各個模塊的文章。這里先講雙向數據綁定的部分，也是最主要的部分。

設計思想：觀察者模式

Vue的雙向數據綁定的設計思想為觀察者模式，為了方便，下文中將被觀察的對象稱為觀察者，將觀察者對象觸發更新的稱為訂閱者。主要涉及到的概念有：

1、Dep對象：Dependency依賴的簡寫，包含有三個主要屬性id, subs, target和四個主要函數addSub, removeSub, depend, notify，是觀察者的依賴集合，負責在數據發生改變時，使用notify()觸發保存在subs下的訂閱列表，依次更新數據和DOM。

2、Observer對象：即觀察者，包含兩個主要屬性value, dep。做法是使用getter/setter方法覆蓋默認的取值和賦值操作，將對象封裝為響應式對象，每一次調用時更新依賴列表，更新值時觸發訂閱者。綁定在對象的__ob__原型鏈屬性上。

源碼實戰解析

有過Vue開發基礎的應該都了解其怎么初始化一個Vue對象：

new Vue({ el: '#container', data: {  count: 100 }, ...});

那么我們就從這個count說起，看它是怎么完成雙向數據綁定的。

下面的代碼片段中英文注釋為尤雨溪所寫，中文注釋為我所寫，英文注釋更能代表開發者的清晰思路。

首先從全局的初始化函數調用：initMixin(Vue$3); ，這里的Vue$3對象就是全局的Vue對象，在此之前已經掛載了Vue的各種基本數據和函數。這個函數體就是初始化我們上面聲明Vue語句的過程化邏輯，取主體代碼來看：

// 這里的options就是上面聲明Vue對象的json對象Vue.prototype._init = function (options) { ... var vm = this; ... initLifecycle(vm); initEvents(vm); initRender(vm); callHook(vm, 'beforeCreate'); // 這里就是我們接下來要跟進的初始化Vue參數 initState(vm); initInjections(vm); callHook(vm, 'created'); ... };