虽然工作中一直使用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。
id: 每个观察者(依赖对象)的唯一标识。
subs: 观察者对象的订阅者列表。
target: 全局唯一的订阅者对象，因为只能同时计算和更新一个订阅者的值。
addSub(): 使用`push()`方法添加一个订阅者。
removeSub(): 使用`splice()`方法移除一个订阅者。
depend(): 将自己添加到当前订阅者对象的依赖列表。
notify(): 在数据被更新时，会遍历subs对象，触发每一个订阅者的更新。
2、Observer对象：即观察者，包含两个主要属性value, dep。做法是使用getter/setter方法覆盖默认的取值和赋值操作，将对象封装为响应式对象，每一次调用时更新依赖列表，更新值时触发订阅者。绑定在对象的__ob__原型链属性上。
value: 原始值。
dep: 依赖列表。
源码实战解析
有过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'); ... };
这里主要完成了初始化事件、渲染、参数、注入等过程，并不断调用事件钩子的回调函数。下面来到如何初始化参数：
function initState (vm) { vm._watchers = []; var opts = vm.$options; if (opts.props) { initProps(vm, opts.props); } if (opts.methods) { initMethods(vm, opts.methods); } // 我们的count在这里初始化 if (opts.data) { initData(vm); } else { observe(vm._data = {}, true /* asRootData */); } if (opts.computed) { initComputed(vm, opts.computed); } if (opts.watch) { initWatch(vm, opts.watch); } }
这里依次检测参数中包含的props/methods/data/computed/watch并进入不同的函数进行初始化，这里我们只关心initData：
function initData (vm) { var data = vm.$options.data; data = vm._data = typeof data === 'function' ? data.call(vm) : data || {}; if (!isPlainObject(data)) { data = {}; } ... // observe data observe(data, true /* asRootData */);
可以看到Vue的data参数支持对象和回调函数，但最终返回的一定是对象，否则使用空对象。接下来就是重头戏了，我们如何将data参数设置为响应式的：
/** * Attempt to create an observer instance for a value, * returns the new observer if successfully observed, * or the existing observer if the value already has one. */ function observe (value, asRootData) { if (!isObject(value)) { return } var ob; if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__; } else if ( /* 为了防止value不是单纯的对象而是Regexp或者函数之类的，或者是vm实例再或者是不可扩展的 */ observerState.shouldConvert && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { ob = new Observer(value); } if (asRootData && ob) { ob.vmCount++; } return ob }