前言
虽然工作中一直使用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'
"htmlcode">
/**
* 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
}
这里的英文注释非常清晰，就是为了给该对象新建一个观察者类，如果存在则返回已存在的（比如互相引用或依赖重复），可以看到这个观察者列表放置在对象的__ob__属性下。下面我们看下这个Observer观察者类：
/**
* Observer class that are attached to each observed
* object. Once attached, the observer converts target
* object's property keys into getter/setters that
* collect dependencies and dispatches updates.
*/
var Observer = function Observer (value) {
this.value = value;
this.dep = new Dep();
this.vmCount = 0;
// def函数是defineProperty的简单封装
def(value, '__ob__', this);
if (Array.isArray(value)) {
// 在es5及更低版本的js里，无法完美继承数组，这里检测并选取合适的函数
// protoAugment函数使用原型链继承，copyAugment函数使用原型链定义（即对每个数组defineProperty）
var augment = hasProto
"htmlcode">
/**
* Observe a list of Array items.
*/
Observer.prototype.observeArray = function observeArray (items) {
for (var i = 0, l = items.length; i < l; i++) {
observe(items[i]);
}
};
它不过是在Observer类和observe方法中间的一层递归，因为我们观察的只能是对象，而不能是数字、字符串或者数组（数组的观察比较特殊，事实上是重构了方法来触发更新，后面会讲到）。那我们接下来看下Dep类是做什么用的：
/**
* A dep is an observable that can have multiple
* directives subscribing to it.
*/
var Dep = function Dep () {
this.id = uid$1++;
this.subs = [];
};
注释里告诉我们Dep类是一个会被多个指令订阅的可被观察的对象，这里的指令就是我们在html代码里书写的东西，如:class={active: hasActive}或{{ count }} {{ count * price }} ，而他们就会订阅hasActive/count/price这些对象，而这些订阅他们的对象就会被放置在Dep.subs列表中。每一次新建Dep对象，就会全局uid递增，然后传给该Dep对象，保证唯一性id。
我们接着看刚才的walk函数做了什么：
/**
* Walk through each property and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
Observer.prototype.walk = function walk (obj) {
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
defineReactive$$1(obj, keys[i], obj[keys[i]]);
}
};
看来和名字一样，它只是走了一遍，那我们来看下defineReactive$$1做了什么：
/**
* Define a reactive property on an Object.
*/
function defineReactive$$1 (obj, key, val, customSetter) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
var getter = property && property.get;
var setter = property && property.set;
var childOb = observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter "htmlcode">
// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null;
Dep.prototype.depend = function depend () {
if (Dep.target) {
Dep.target.addDep(this);
}
};
Dep.prototype.notify = function notify () {
// stablize the subscriber list first
var subs = this.subs.slice();
for (var i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
};
注释看的出来Dep.target是全局唯一的watcher对象，也就是当前正在指令计算的订阅者，它会在计算时赋值成一个watcher对象，计算完成后赋值为null。而depend是用于对该订阅者添加依赖，告诉它你的值依赖于我，每次更新时应该来找我。另外还有notify()的函数，用于遍历所有的依赖，通知他们更新数据。
这里多看一下addDep()的源码：
/**
* Add a dependency to this directive.
*/
Watcher.prototype.addDep = function addDep (dep) {
var id = dep.id;
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id);
this.newDeps.push(dep);
if (!this.depIds.has(id)) {
// 使用push()方法添加一个订阅者
dep.addSub(this);
}
}
};
可以看到它有去重的机制，当重复依赖时保证相同ID的依赖只有一个。订阅者包含3个属性newDepIds/newDeps/depIds分别存储依赖信息，如果之前就有了这个依赖，那么反过来将该订阅者加入到这个依赖关系中去。
接着看get方法中的dependArray() ：
/**
* Collect dependencies on array elements when the array is touched, since
* we cannot intercept array element access like property getters.
*/
function dependArray (value) {
for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
e = value[i];
e && e.__ob__ && e.__ob__.dep.depend();
if (Array.isArray(e)) {
dependArray(e);
}
}
}
可以看到我们不能像对象一样监听数组的变化，所以如果获取一个数组的值，那么就需要将数组中所有的对象的观察者列表都加入到依赖中去。
这样get方法读取值就代理完成了，接下来我们看set方法代理赋值的实现，我们先获取原始值，然后与新赋的值进行比较，也叫脏检查，如果数据发生了改变，则对该数据进行重新建立观察者，并通知所有的订阅者更新。
接下来我们看下数组的更新检测是如何实现的：
/*
* not type checking this file because flow doesn't play well with
* dynamically accessing methods on Array prototype
*/
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function (method) {
// cache original method
var original = arrayProto[method];
def(arrayMethods, method, function mutator () {
var arguments$1 = arguments;
// avoid leaking arguments:
// http://jsperf.com/closure-with-arguments
var i = arguments.length;
var args = new Array(i);
while (i--) {
args[i] = arguments$1[i];
}
var result = original.apply(this, args);
var ob = this.__ob__;
var inserted;
switch (method) {
case 'push':
inserted = args;
break
case 'unshift':
inserted = args;
break
case 'splice':
inserted = args.slice(2);
break
}
if (inserted) { ob.observeArray(inserted); }
// notify change
ob.dep.notify();
return result
});
});
看的出来我们模拟了一个数组对象，代理了push/pop/shift/unshift/splice/sort/reverse方法，用于检测数组的变化，并通知所有订阅者更新。如果有新建元素，会补充监听新对象。
这就是从代码上解释为什么Vue不支持数组下标修改和长度修改的原因，至于为什么这么设计，我后面会再次更新或再开篇文章，讲一些通用的设计问题以及Js机制和缺陷。
总结
从上面的代码中我们可以一步步由深到浅的看到Vue是如何设计出双向数据绑定的，最主要的两点：
- 使用getter/setter代理值的读取和赋值，使得我们可以控制数据的流向。
- 使用观察者模式设计，实现了指令和数据的依赖关系以及触发更新。
- 对于数组，代理会修改原数组对象的方法，并触发更新。
明白了这些原理，其实你也可以实现一个简单的数据绑定，造一个小轮子，当然，Vue的强大之处不止于此，我们后面再来聊一聊它的组件和渲染，看它是怎么一步一步将我们从DOM对象的魔爪里拯救出来的。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
参考资料
数据的响应化：https://github.com/Ma63d/vue-...
Vue v2.2.0 源代码文件
es6 Proxy: http://es6.ruanyifeng.com/#do...
富贵资源网 Design By www.hznty.com
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。