├── README.md
├── SUMMARY.md
├── bootstrap.md
├── common.md
├── event
    ├── README.md
    ├── emit.md
    ├── off.md
    ├── on.md
    └── once.md
├── extend.md
├── global
    ├── global_component_filter_directive.md
    ├── mixin.md
    └── plugin.md
├── hook.md
├── init
    ├── README.md
    ├── computed.md
    ├── data.md
    ├── methods.md
    ├── mixin.md
    ├── props.md
    ├── provide_inject.md
    ├── strats.md
    └── watch.md
├── reactivity
    ├── README.md
    ├── delete.md
    ├── dep.md
    ├── nexttick.md
    ├── observer.md
    ├── set.md
    ├── watch.md
    └── watcher.md
├── virtualdom
    ├── README.md
    ├── async_component.md
    ├── create_element.md
    ├── patch.md
    └── vnode.md
└── vuex.md


/README.md:
--------------------------------------------------------------------------------
 1 | # vue_source_analysis
 2 | Vue源码解读
 3 | 
 4 | 本人的Vue源码阅读笔记
 5 | 
 6 | 第一轮阅读仅考虑data、method、computed、watch以及最基本的双向绑定实现，有可能会顺便提及一些API的，但不会涉及组件、自定义指令、插件
 7 | 
 8 | [github仓库地址](https://github.com/jiangshanmeta/vue_source_analysis)
 9 | 
10 | [在线电子书地址](https://jiangshanmeta.gitbooks.io/vue_source_analysis/content/)


--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
 1 | * [前言](/README.md)
 2 | * [项目结构](/bootstrap.md)
 3 | * [基础工具函数](/common.md)
 4 | * [数据响应系统](/reactivity/README.md)
 5 | 	* [Dep](/reactivity/dep.md)
 6 | 	* [Observer](/reactivity/observer.md)
 7 | 	* [Watcher](/reactivity/watcher.md)
 8 | 	* [$set](/reactivity/set.md)
 9 | 	* [$delete](/reactivity/delete.md)
10 | 	* [$watch](/reactivity/watch.md)
11 | 	* [异步更新队列](/reactivity/nexttick.md)
12 | * [初始化](/init/README.md)
13 | 	* [预处理策略](/init/strats.md)
14 | 	* [预处理mixin](/init/mixin.md)
15 | 	* [provide/inject](/init/provide_inject.md)
16 | 	* [props/propsData](/init/props.md)
17 | 	* [methods初始化](/init/methods.md)
18 | 	* [data初始化](/init/data.md)
19 | 	* [computed初始化](/init/computed.md)
20 | 	* [watch初始化](/init/watch.md)
21 | * [钩子](/hook.md)
22 | * [实例方法/事件](/event/README.md)
23 | 	* [$on](/event/on.md)
24 | 	* [$off](/event/off.md)
25 | 	* [$once](/event/once.md)
26 | 	* [$emit](/event/emit.md)
27 | * [创建Vue子类](/extend.md)
28 | * 全局注册
29 | 	* [资源](/global/global_component_filter_directive.md)
30 | 	* [mixin](/global/mixin.md)
31 | 	* [插件](/global/plugin.md)
32 | * [Virtual DOM](/virtualdom/README.md)
33 | 	* [VNode](/virtualdom/vnode.md)
34 | 	* [patch](/virtualdom/patch.md)
35 | 	* [创建Virtual Dom](/virtualdom/create_element.md)
36 | 	* [异步组件](/virtualdom/async_component.md)
37 | 
38 | 	
39 | * [vuex](vuex.md)


--------------------------------------------------------------------------------
/bootstrap.md:
--------------------------------------------------------------------------------
 1 | 最开始读Vue源码的时候是读的编译后的代码，因为那时没接触过前端工程化的东西，使用Vue是通过```<script>```标签直接引入，而不是包管理工具。虽然如此依然是读完了Vue的响应式原理。然而这么读真的很费劲，所以我就准备读真·源码了。读源码其实最忌讳一开始就深入细节而不关注整体结构(underscore这种各个方法几乎独立的小库除外)，所以这里要介绍的就是项目整体结构。
 2 | 
 3 | 我读的是2.3.0版本，一些后续版本添加的feature我后面也会补充上。
 4 | 
 5 | 我们真正需要关心的是src目录下的代码，它包括以下几个子目录：
 6 | 
 7 | * compiler 包含将template转换为render函数的代码
 8 | * core 和平台无关的核心代码，比如vue的响应式、虚拟DOM
 9 | * platforms 和平台有关的代码，入口文件也在这个目录下
10 | * server 服务器端渲染相关
11 | * sfc 单文件组件相关
12 | * shared 共享的代码，比如一些工具方法
13 | 
14 | 那我们的入口文件在哪？上面提到了在platforms下面，我们暂时略过weex直接看web目录。这个目录下有多个js文件，哪个是入口文件啊？其实都是。vue的代码大概分为两块，一块是compiler，大概负责将模板转换为render函数，另一块是runtime，用来创建Vue实例、渲染以及处理虚拟DOM。这样就对应了三个入口:compier.js(只含有compiler代码)，runtime.js(只含有runtime代码)以及runtime-with-compiler.js(两块代码都包含)。还有一个server-render.js是负责服务器端渲染的。这三个入口，结合不同的构建format，就构成了[文档中提及的不同构建版本](https://cn.vuejs.org/v2/guide/installation.html#对不同构建版本的解释)。更为具体的描述需要看build相关代码(尤其是build目录下的config.js)，然而直接把runtime-with-compiler.js当成入口文件就已经足够了。
15 | 
16 | 其他和src平级的目录，build目录负责构建，dist目录是构建的目标目录，flow是类型声明相关代码(使用flow做类型限制)，types目录是用typescript声明类型，这些没有必要做过多深究，知道干什么的就好了。


--------------------------------------------------------------------------------
/common.md:
--------------------------------------------------------------------------------
  1 | vue.js中有一些小函数可以单独摘出来加入到自己的代码库中
  2 | 
  3 | #### remove
  4 | 
  5 | ```javascript
  6 | function remove (arr, item) {
  7 |   if (arr.length) {
  8 |     var index = arr.indexOf(item);
  9 |     if (index > -1) {
 10 |       return arr.splice(index, 1)
 11 |     }
 12 |   }
 13 | }
 14 | ```
 15 | 
 16 | 经常会遇到这么一个需求，在一个数组中删除一个特定的元素，第一步要做的是根据元素找到对应的索引，第二部根据索引删除元素。其实我个人觉得这个封装到Array.prototype上也不为过，毕竟太常用到了。
 17 | 
 18 | ```javascript
 19 | if(!Array.prototype.remove){
 20 | 	Array.prototype.remove = function(item){
 21 | 		if(arguments.length===0){
 22 | 			throw new TypeError('item to be removed is needed');
 23 | 		}
 24 | 		var indexOf = Array.prototype.indexOf;
 25 | 		var splice = Array.prototype.splice;
 26 | 		var list = Object(this);
 27 | 		var index = indexOf.call(list,item);
 28 | 		if(index > -1){
 29 | 			splice.call(list,index,1);
 30 | 			return true;
 31 | 		}
 32 | 		return false;
 33 | 	}
 34 | }
 35 | ```
 36 | 
 37 | 之前讲javascript的polyfill时提到过，Array原型上的```findIndex```方法是个高配版的```indexOf```，它通过传入的回调判断是否满足条件，我们也可以按照这个思路下来加强```remove```方法。
 38 | 
 39 | ```javascript
 40 | if(!Array.prototype.removeBy){
 41 | 	Array.prototype.removeBy = function(callback,thisArg){
 42 | 		if (typeof callback !== 'function') {
 43 | 			throw new TypeError('callback must be a function');
 44 | 		}
 45 | 		var findIndex = Array.prototype.findIndex;
 46 | 		var splice = Array.prototype.splice;
 47 | 		var list = Object(this);
 48 | 		var index = findIndex.call(list,callback,thisArg);
 49 | 		if(index>0){
 50 | 			splice.call(list,index,1);
 51 | 			return true;
 52 | 		}
 53 | 		return false;
 54 | 	}
 55 | }
 56 | ```
 57 | 
 58 | #### cached
 59 | 
 60 | ```javascript
 61 | function cached (fn) {
 62 |   var cache = Object.create(null);
 63 |   return (function cachedFn (str) {
 64 |     var hit = cache[str];
 65 |     return hit || (cache[str] = fn(str))
 66 |   })
 67 | }
 68 | ```
 69 | 
 70 | 这个函数的作用是对传入的函数进行一次包装，使其具有缓存结果的能力。在underscore.js里也有类似的代码：
 71 | 
 72 | ```javascript
 73 | _.memoize = function(func, hasher) {
 74 | 	var memoize = function(key) {
 75 | 		var cache = memoize.cache;
 76 | 		var address = '' + (hasher ? hasher.apply(this, arguments) : key);
 77 | 		if (!_.has(cache, address)) cache[address] = func.apply(this, arguments);
 78 | 		return cache[address];
 79 | 	};
 80 | 	memoize.cache = {};
 81 | 	return memoize;
 82 | };
 83 | ```
 84 | 
 85 | 基本思路是一致的，都是找个变量缓存结果，但是underscore还支持了定制缓存时的键。
 86 | 
 87 | 
 88 | #### camelize
 89 | 
 90 | ```javascript
 91 | var camelizeRE = /-(\w)/g;
 92 | var camelize = cached(function (str) {
 93 | 	return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
 94 | });
 95 | ``` 
 96 | 
 97 | 这个函数的作用是把中划线连接的字符串转换成驼峰的形式，vue还对驼峰化的结果进行了缓存。我们可以把这里的缓存功能去掉作为一个工具函数。
 98 | 
 99 | ```javascript
100 | var camelize = (function(){
101 | 	var camelizeRE = /-(\w)/g;
102 | 	return function(str){
103 | 		return str.replace(camelizeRE,function (_, c) { return c ? c.toUpperCase() : ''; })
104 | 	}
105 | })();
106 | ```
107 | 
108 | #### hyphenate
109 | 
110 | 这个函数所做的和上面的```camelize```正好相反，它是把驼峰化的字符串转化为中划线连接的。
111 | 
112 | 我们先看下vue中的实现：
113 | 
114 | ```javascript
115 | var hyphenateRE = /([^-])([A-Z])/g;
116 | var hyphenate = cached(function (str) {
117 | 	return str
118 | 		.replace(hyphenateRE, '$1-$2')
119 | 		.replace(hyphenateRE, '$1-$2')
120 | 		.toLowerCase()
121 | });
122 | ```
123 | 
124 | 我们结合实例看一下作者的思路，比如字符串```aBcD```，我们期望的中划线形式是```a-bc-d```，经过第一个replace方法我们得到了```a-Bc-D```，到这里我们只需转一下大小写就好了，同时注意到在这个情况下第二个replace是没有任何匹配结果的。那第二个replace是做什么，或者说什么情况下需要第二个replace，我的答案是字符串有连续大写字母的情况。比如字符串```aBCD```，第一个replace的结果是```a-BC-D```(请思考为什么)，经过第二个replace我们得到```a-B-C-D```。
125 | 
126 | 关于中划线化这个方法，我想提出我的看法：
127 | 
128 | ```javascript
129 | function hyphenate(str){
130 | 	var hyphenateRE = /([A-Z])/g;
131 | 	return str.replace(hyphenateRE,'-$1').toLowerCase();
132 | }
133 | ```
134 | 
135 | 我是这样考虑的：中划线化需要每个大写字母前面加个中划线，然后转小写即可。我能想到的和vue的方案有区别的情况是首字母是大写。vue的方案首字母大写不会在首字母前面加中划线，我的方案会加，但驼峰化的字符串一般而言首字母都是小写的啊。
136 | 
137 | 
138 | #### capitalize
139 | 
140 | ```javascript
141 | var capitalize = cached(function (str) {
142 | 	return str.charAt(0).toUpperCase() + str.slice(1)
143 | });
144 | ```
145 | 
146 | 在php里有个同样功能的函数叫```ucfirst```，就是把字符串首字母大写。
147 | 
148 | 
149 | 
150 | #### isReserved
151 | 
152 | ```javascript
153 | function isReserved (str) {
154 | 	var c = (str + '').charCodeAt(0);
155 | 	return c === 0x24 || c === 0x5F
156 | }
157 | ```
158 | 
159 | 一般有个默认的规范是以```_```开头的为私有，在vue中一些属性和方法以```$```开头，因而这两个作为保留字
160 | 
161 | 
162 | #### isNative
163 | 
164 | ```javascript
165 | function isNative (Ctor) {
166 | 	return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
167 | }
168 | ```
169 | 
170 | 这里```native code```的含义是：native代码实现的build-in函数，而不是javascript代码。毕竟有时希望原生的功能，而不是其他开发者polyfill的功能。


--------------------------------------------------------------------------------
/event/README.md:
--------------------------------------------------------------------------------
1 | 在前端圈，自定义事件早就不是什么新鲜话题了。比如说在古老的jQuery中，就有on、off、once、trigger这几个相关API。现在前端实现自定义事件相关API，算是标配了吧。其实大家的实现思路都差不多：每个事件有个相关的数组，这个数组中的元素是触发事件时要执行的回调。我们看下Vue的具体实现吧。


--------------------------------------------------------------------------------
/event/emit.md:
--------------------------------------------------------------------------------
 1 | 触发自定义事件事件思路不复杂：根据事件名找到对应的回调数组，然后遍历执行就好了(注意this指向)。
 2 | 
 3 | ```javascript
 4 | Vue.prototype.$emit = function (event) {
 5 | 	var vm = this;
 6 | 	{
 7 | 		var lowerCaseEvent = event.toLowerCase();
 8 | 		if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
 9 | 			tip(
10 | 				"Event \"" + lowerCaseEvent + "\" is emitted in component " +
11 | 				(formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
12 | 				"Note that HTML attributes are case-insensitive and you cannot use " +
13 | 				"v-on to listen to camelCase events when using in-DOM templates. " +
14 | 				"You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
15 | 			);
16 | 		}
17 | 	}
18 | 	var cbs = vm._events[event];
19 | 	if (cbs) {
20 | 		cbs = cbs.length > 1 ? toArray(cbs) : cbs;
21 | 		var args = toArray(arguments, 1);
22 | 		for (var i = 0, l = cbs.length; i < l; i++) {
23 | 			cbs[i].apply(vm, args);
24 | 		}
25 | 	}
26 | 	return vm
27 | };
28 | ```
29 | 
30 | 这里有这么个问题，里面的```toArray```方法起到什么作用？我先把```toArray```的实现抄下来：
31 | 
32 | ```javascript
33 | function toArray (list, start) {
34 | 	start = start || 0;
35 | 	var i = list.length - start;
36 | 	var ret = new Array(i);
37 | 	while (i--) {
38 | 		ret[i] = list[i + start];
39 | 	}
40 | 	return ret
41 | }
42 | ```
43 | 
44 | 关于arguments的那个toArray，我想起来了underscore.js中```optimizeCb```这个函数，其本质上是arguments自身的性能问题。在这里将类数组arguments转换成真数组可以提高性能。
45 | 
46 | 那针对回调数组的toArray起到了什么作用？联想到上一节所说的```$once```方法，我们可以看出回调在执行的时候可能会改变这个回调数组，如果我们根据原回调数组去遍历可能会出错。所以我们取了一个新回调数组，按照新回调数组去遍历，改变原回调数组并不会影响新回调数组。


--------------------------------------------------------------------------------
/event/off.md:
--------------------------------------------------------------------------------
 1 | 这个API根据参数的不同实现了以下几个功能：
 2 | 
 3 | * 取消监听所有事件
 4 | * 取消监听某一个事件
 5 | * 移除某个事件的某个回调
 6 | * 移除多个事件的某个回调
 7 | 
 8 | 既然已经知道了这个自定义事件的数据组织形式，实现这些功能并不复杂：
 9 | 
10 | * 取消监听所有事件，把```_event```清空
11 | * 取消监听某个事件，把```_event[eventName]```清空
12 | * 移除某个事件的某个回调，遍历一遍找到回调然后从数组中移除
13 | * 移除多个事件的某个回调，利用第三个功能即可
14 | 
15 | ```javascript
16 | Vue.prototype.$off = function (event, fn) {
17 | 	var this$1 = this;
18 | 	var vm = this;
19 | 	//取消监听所有事件
20 | 	if (!arguments.length) {
21 | 		vm._events = Object.create(null);
22 | 		return vm
23 | 	}
24 | 
25 | 	// 取消监听多个事件的特定回调
26 | 	if (Array.isArray(event)) {
27 | 		for (var i$1 = 0, l = event.length; i$1 < l; i$1++) {
28 | 			this$1.$off(event[i$1], fn);
29 | 		}
30 | 		return vm
31 | 	}
32 | 	var cbs = vm._events[event];
33 | 	if (!cbs) {
34 | 		return vm
35 | 	}
36 | 
37 | 	// 取消监听某个事件
38 | 	if (arguments.length === 1) {
39 | 		vm._events[event] = null;
40 | 		return vm
41 | 	}
42 | 	var cb;
43 | 	var i = cbs.length;
44 | 	// 取消监听某个事件的特定回调
45 | 	while (i--) {
46 | 		cb = cbs[i];
47 | 		if (cb === fn || cb.fn === fn) {
48 | 			cbs.splice(i, 1);
49 | 			break
50 | 		}
51 | 	}
52 | 	return vm
53 | };
54 | ```
55 | 
56 | 根据上面所拆解的功能，这段代码就很好理解了，我也添加了必要的注释。
57 | 
58 | 还有几点小细节：
59 | 
60 | 作者在这里实现了链式调用，不过这也是标配了吧。
61 | 
62 | 实现第三个功能时的遍历，作者采用了while循环逆向查找，这么做是为了减少操作优化性能，具体原理请看《高性能JavaScript》。
63 | 
64 | 判断是否是特定回调时，使用```cb === fn || cb.fn === fn```，你可能会奇怪为什么有```cb.fn === fn```这个判断，看了下面的```$once```方法的实现你就明白了。


--------------------------------------------------------------------------------
/event/on.md:
--------------------------------------------------------------------------------
 1 | $on方法类似于```addEventListener```，用于监听某个事件，添加事件触发时执行的回调。
 2 | 
 3 | ```javascript
 4 | Vue.prototype.$on = function (event, fn) {
 5 | 	var this$1 = this;
 6 | 	var vm = this;
 7 | 	if (Array.isArray(event)) {
 8 | 		for (var i = 0, l = event.length; i < l; i++) {
 9 | 			this$1.$on(event[i], fn);
10 | 		}
11 | 	} else {
12 | 	  (vm._events[event] || (vm._events[event] = [])).push(fn);
13 | 		if (hookRE.test(event)) {
14 | 			vm._hasHookEvent = true;
15 | 		}
16 | 	}
17 | 	return vm
18 | };
19 | ```
20 | 
21 | 最核心的代码是这一行：```(vm._events[event] || (vm._events[event] = [])).push(fn);```。Vue把所有的自定义事件都组织在了```_event```下，每个事件维护一个数组，数组的每一项是触发事件时执行的回调。
22 | 
23 | 作者还考虑到了多个事件有相同回调的情况，所以就有了```Array.isArray(event)```那个判断。但我个人认为这个设计不是很合理。
24 | 
25 | 
26 | ```javascript
27 | Vue.prototype.$on = function (event, fn) {
28 | 	var this$1 = this;
29 | 	var vm = this;
30 | 	if (typeof event === 'object') {
31 | 		for(key in event){
32 | 			this$1.$on(key,event[key]);
33 | 		}
34 | 	} else {
35 | 	  (vm._events[event] || (vm._events[event] = [])).push(fn);
36 | 		if (hookRE.test(event)) {
37 | 			vm._hasHookEvent = true;
38 | 		}
39 | 	}
40 | 	return vm
41 | };
42 | ```
43 | 
44 | 上面是我修改的代码，我考虑的是传入一个对象，对象的键是事件名，值是回调。jQuery中经常见到这样设计的API。


--------------------------------------------------------------------------------
/event/once.md:
--------------------------------------------------------------------------------
 1 | $once方法监听一个自定义事件，但传入的回调只执行一次，触发后回调被移除。要实现这个功能，原始回调需要被包装一层形成新回调(下面代码中的on函数)，新回调除了调用原回调，还要负责触发后的移除工作(对应$off方法的调用)。
 2 | 
 3 | 
 4 | 有了```$on```方法和```$off```方法，实现```$once```方法
 5 | 
 6 | ```javascript
 7 | Vue.prototype.$once = function (event, fn) {
 8 | 	var vm = this;
 9 | 	function on () {
10 | 		vm.$off(event, on);
11 | 		fn.apply(vm, arguments);
12 | 	}
13 | 	on.fn = fn;
14 | 	vm.$on(event, on);
15 | 	return vm
16 | };
17 | ```
18 | 
19 | 上一节讲```$off```方法的实现时留了个问题，为什么遍历找回调是通过```cb === fn || cb.fn === fn```判断，原因就在这里。使用```$once```方法时，我们实际上注册的回调是```on```而不是```fn```，但是外界无法感知这个```on```方法，因而无法移除回调。为了解决这个问题，作者在新回调上添加了一个属性```fn```，这个属性指向原回调，通过新回调就可以找到原回调了。


--------------------------------------------------------------------------------
/extend.md:
--------------------------------------------------------------------------------
  1 | Vue.extend是用来创造Vue子类的。说是子类，但是一般都能完成特殊功能，后面要讲的组件其实就是特殊的Vue子类。一般而言很少需要我们自己调用Vue.exend方法，生成组件子类是自动完成的，[element-ui的message功能](https://jiangshanmeta.gitbooks.io/elementui_source_analysis/content/message.html)手动调用了Vue.extend方法创造了一个子类。
  2 | 
  3 | ```javascript
  4 | Vue.extend = function (extendOptions: Object): Function {
  5 |   extendOptions = extendOptions || {}
  6 |   const Super = this
  7 |   // 父类id
  8 |   const SuperId = Super.cid
  9 | 
 10 |   // cachedCtors用来缓存创造的子类
 11 |   // 同一个extendOptions同一个父类只会生成一个子类
 12 |   const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
 13 |   if (cachedCtors[SuperId]) {
 14 |     return cachedCtors[SuperId]
 15 |   }
 16 | 
 17 |   const name = extendOptions.name || Super.options.name
 18 |   if (process.env.NODE_ENV !== 'production') {
 19 |     if (!/^[a-zA-Z][\w-]*$/.test(name)) {
 20 |       warn(
 21 |         'Invalid component name: "' + name + '". Component names ' +
 22 |         'can only contain alphanumeric characters and the hyphen, ' +
 23 |         'and must start with a letter.'
 24 |       )
 25 |     }
 26 |   }
 27 | 
 28 |   // 子类构造函数
 29 |   const Sub = function VueComponent (options) {
 30 |     this._init(options)
 31 |   }
 32 | 
 33 |   // 继承父类的prototype
 34 |   Sub.prototype = Object.create(Super.prototype)
 35 | 
 36 |   // 子类的原型对象的constructor指回子类
 37 |   // 其实是屏蔽掉父类原型对象的constructor属性
 38 |   Sub.prototype.constructor = Sub
 39 | 
 40 |   // 子类id
 41 |   Sub.cid = cid++
 42 | 
 43 |   // 合并父类的options和子类的options
 44 |   Sub.options = mergeOptions(
 45 |     Super.options,
 46 |     extendOptions
 47 |   )
 48 |   Sub['super'] = Super
 49 | 
 50 | 
 51 |   // 定义的props代理到原型对象上
 52 |   // 实例初始化props时只需代理自身特有的props
 53 |   if (Sub.options.props) {
 54 |     initProps(Sub)
 55 |   }
 56 | 
 57 |   // 和上面类似，把公有的computed代理到原型对象上
 58 |   // 实例初始化computed时只需代理自身特有computed
 59 |   if (Sub.options.computed) {
 60 |     initComputed(Sub)
 61 |   }
 62 | 
 63 |   // 复制静态方法
 64 |   Sub.extend = Super.extend
 65 |   Sub.mixin = Super.mixin
 66 |   Sub.use = Super.use
 67 | 
 68 | 
 69 |   // 依然是静态方法的复制
 70 |   // component、directive、filter
 71 |   ASSET_TYPES.forEach(function (type) {
 72 |     Sub[type] = Super[type]
 73 |   })
 74 | 
 75 |   // 如果有名，把该子类当成一个组件注册
 76 |   if (name) {
 77 |     Sub.options.components[name] = Sub
 78 |   }
 79 | 
 80 |   Sub.superOptions = Super.options
 81 |   Sub.extendOptions = extendOptions
 82 |   Sub.sealedOptions = extend({}, Sub.options)
 83 | 
 84 |   // 缓存子类
 85 |   cachedCtors[SuperId] = Sub
 86 | 
 87 |   return Sub
 88 | }
 89 | 
 90 | // 公有的props代理到prototype上
 91 | function initProps (Comp) {
 92 |   const props = Comp.options.props
 93 |   for (const key in props) {
 94 |     proxy(Comp.prototype, `_props`, key)
 95 |   }
 96 | }
 97 | 
 98 | // 公有的computed的代理到prototype上
 99 | function initComputed (Comp) {
100 |   const computed = Comp.options.computed
101 |   for (const key in computed) {
102 |     defineComputed(Comp.prototype, key, computed[key])
103 |   }
104 | }
105 | ```
106 | 
107 | 如果熟悉javascript的继承上面代码就比较好理解了，静态方法就直接复制粘贴了，原定对象上继承使用了Object.create方法。还有要说的是关于props和computed，直接代理到了原型对象上，子类的实例在初始化时就不用重复代理了。


--------------------------------------------------------------------------------
/global/global_component_filter_directive.md:
--------------------------------------------------------------------------------
 1 | 在Vue中资源指的是component、filter和directive。全局注册资源是把资源挂载到Vue(或者Vue子类)的静态属性options上，在实例化的时候会把实例的资源属性与全局的资源进行合并(merge策略是通过Object.create继承全局资源)。
 2 | 
 3 | ```javascript
 4 | const ASSET_TYPES = [
 5 |   'component',
 6 |   'directive',
 7 |   'filter'
 8 | ]
 9 | 
10 |   ASSET_TYPES.forEach(type => {
11 |     // 全局注册的静态方法
12 |     // 子类是直接引用这几个方法
13 |     Vue[type] = function (
14 |       id: string,
15 |       definition: Function | Object
16 |     ): Function | Object | void {
17 |       // 只有资源id没有值时认为是获取全局资源
18 |       if (!definition) {
19 |         return this.options[type + 's'][id]
20 |       } else {
21 |         /* istanbul ignore if */
22 |         if (process.env.NODE_ENV !== 'production') {
23 |           if (type === 'component' && config.isReservedTag(id)) {
24 |             warn(
25 |               'Do not use built-in or reserved HTML elements as component ' +
26 |               'id: ' + id
27 |             )
28 |           }
29 |         }
30 |         if (type === 'component' && isPlainObject(definition)) {
31 |           definition.name = definition.name || id
32 |           // 对于component，最终是转换成为了一个子类
33 |           // 然而我一直想不通特意使用_base.extend而不是this.extend
34 |           // 这样写组件注册树只有两层
35 |           definition = this.options._base.extend(definition)
36 |         }
37 | 
38 |         // 处理注册指令的一个语法糖
39 |         if (type === 'directive' && typeof definition === 'function') {
40 |           definition = { bind: definition, update: definition }
41 |         }
42 | 
43 |         // 资源分类挂载到静态属性options上
44 |         this.options[type + 's'][id] = definition
45 |         return definition
46 |       }
47 |     }
48 |   })
49 | 
50 | ```


--------------------------------------------------------------------------------
/global/mixin.md:
--------------------------------------------------------------------------------
 1 | 全局mixin的实现非常简单，就是把旧有的options和选项merge构成新的options：
 2 | 
 3 | ```javascript
 4 | Vue.mixin = function (mixin: Object) {
 5 |     this.options = mergeOptions(this.options, mixin)
 6 | }
 7 | ```
 8 | 
 9 | 但是这个操作非常危险，一方面是因为它是全局性的，另一方面是因为它会重写类的静态属性options。在实例化的时候，会比较子类缓存的父类options和父类options是否一致：
10 | 
11 | ```javascript
12 | function resolveConstructorOptions (Ctor: Class<Component>) {
13 |   let options = Ctor.options
14 |   // Vue创建子类时通过静态属性super引用父类
15 |   if (Ctor.super) {
16 |     const superOptions = resolveConstructorOptions(Ctor.super)
17 |     const cachedSuperOptions = Ctor.superOptions
18 |     // 子类缓存的父类options与父类现有options对比
19 |     // options被重写只有使用全局mixin的时候
20 |     if (superOptions !== cachedSuperOptions) {
21 |       Ctor.superOptions = superOptions
22 | 
23 |       // 子类也可能调用mixin全局注册
24 |       // 相当于创建子类时使用mixin选项
25 |       // 因此把他们合并到extendOptions中
26 |       const modifiedOptions = resolveModifiedOptions(Ctor)
27 |       if (modifiedOptions) {
28 |         extend(Ctor.extendOptions, modifiedOptions)
29 |       }
30 |       // 重新合并构成新的子类options
31 |       options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
32 |       if (options.name) {
33 |         options.components[options.name] = Ctor
34 |       }
35 |     }
36 |   }
37 |   return options
38 | }
39 | function resolveModifiedOptions (Ctor: Class<Component>): ?Object {
40 |   let modified
41 |   const latest = Ctor.options
42 |   const extended = Ctor.extendOptions
43 |   // sealedOptions是生成子类时的子类options快照
44 |   const sealed = Ctor.sealedOptions
45 |   for (const key in latest) {
46 |     // 当前值和快照值不一致，说明子类调用mixin了
47 |     if (latest[key] !== sealed[key]) {
48 |       if (!modified) modified = {}
49 |       modified[key] = dedupe(latest[key], extended[key], sealed[key])
50 |     }
51 |   }
52 |   return modified
53 | }
54 | function dedupe (latest, extended, sealed) {
55 |   // 值为array类型，是钩子或者watch，原注释只提到了钩子
56 |   if (Array.isArray(latest)) {
57 |     const res = []
58 |     sealed = Array.isArray(sealed) ? sealed : [sealed]
59 |     extended = Array.isArray(extended) ? extended : [extended]
60 |     for (let i = 0; i < latest.length; i++) {
61 |       // 保留生成子类时选项拥有的和子类通过mixin全局注册的
62 |       // 把从父类选项合并的干掉，因为后面还会和父类的选项合并一遍
63 |       if (extended.indexOf(latest[i]) >= 0 || sealed.indexOf(latest[i]) < 0) {
64 |         res.push(latest[i])
65 |       }
66 |     }
67 |     return res
68 |   } else {
69 |     return latest
70 |   }
71 | }
72 | ```
73 | 
74 | 当父类options改变时，子类在实例化时需要重新确定自身的options。所以在Vue中使用全局mixin，应尽量保证在创造Vue子类之前(Vue.component、Vue.extend)。


--------------------------------------------------------------------------------
/global/plugin.md:
--------------------------------------------------------------------------------
 1 | 插件是按照特定规则编写的，用于完成某个特定功能的一组代码。
 2 | 
 3 | 在Vue中，编写插件可能涉及以下形式：
 4 | 
 5 | * 添加指令
 6 | * 添加过滤器
 7 | * 添加组件
 8 | * 为Vue的原型添加方法
 9 | * 为Vue构造函数添加方法
10 | 
11 | 有这么多可能的形式，Vue为其插件定义了如下编写规则：插件应当有一个公开方法```install```，```install```方法第一个参数是Vue构造函数。
12 | 
13 | ```javascript
14 | Vue.use = function (plugin) {
15 |     // 防止多次注册
16 | 	if (plugin.installed) {
17 | 		return
18 | 	}
19 | 	
20 | 	// 允许其他参数，并数组化
21 | 	var args = toArray(arguments, 1);
22 | 
23 | 	// 第一个参数是Vue构造函数
24 | 	// 对于子类来说是子类的构造函数，这样可以把插件作用域限定在子类，不污染全局
25 | 	args.unshift(this);
26 | 
27 | 	// 调用插件安装函数，注册插件
28 | 	if (typeof plugin.install === 'function') {
29 | 		plugin.install.apply(plugin, args);
30 | 	} else if (typeof plugin === 'function') {
31 | 		plugin.apply(null, args);
32 | 	}
33 | 
34 | 	// 标记插件已经注册
35 | 	plugin.installed = true;
36 | 	return this
37 | };
38 | ```
39 | 
40 | Vue在在构造函数上暴露了一个```use```方法，用于注册插件。


--------------------------------------------------------------------------------
/hook.md:
--------------------------------------------------------------------------------
 1 | 钩子这个概念本身没什么可以说的，毕竟已经见得多了。
 2 | 
 3 | 之前讲参数预处理的时候，提到了钩子字段被处理成了一个数组，数组中每一项都是个函数(正常情况下)。说到这钩子调用思路就很明确了，遍历这个数组，每一个函数在Vue实例上调用即可。
 4 | 
 5 | ```javascript
 6 | function callHook (vm, hook) {
 7 |   var handlers = vm.$options[hook];
 8 |   if (handlers) {
 9 |     for (var i = 0, j = handlers.length; i < j; i++) {
10 |       try {
11 |         handlers[i].call(vm);
12 |       } catch (e) {
13 |         handleError(e, vm, (hook + " hook"));
14 |       }
15 |     }
16 |   }
17 |   if (vm._hasHookEvent) {
18 |     vm.$emit('hook:' + hook);
19 |   }
20 | }
21 | ```
22 | 
23 | 在预处理的时候，我们对数组中的每一项并没有进行类型判断，并不能肯定每一项一定是函数，所以这里有```try catch```。


--------------------------------------------------------------------------------
/init/README.md:
--------------------------------------------------------------------------------
 1 | 初始化这一章主要包括以下内容：我们传入的参数(provide/inject/method/data/computed/watch)是如何被预处理的、如何初始化。
 2 | 
 3 | 与此相关的几个属性是：$options、$data、$props。我们对传入的数据合并后都是挂在$options下，包括我们自定义的属性。$data与$props分别反映了data和props，但是本质只是一层代理：
 4 | 
 5 | ```javascript
 6 |   const dataDef = {}
 7 |   // 访问$data实质上是访问_data
 8 |   dataDef.get = function () { return this._data }
 9 |   const propsDef = {}
10 |   // 访问$props实际是访问_props
11 |   propsDef.get = function () { return this._props }
12 |   if (process.env.NODE_ENV !== 'production') {
13 |     dataDef.set = function (newData: Object) {
14 |       warn(
15 |         'Avoid replacing instance root $data. ' +
16 |         'Use nested data properties instead.',
17 |         this
18 |       )
19 |     }
20 |     propsDef.set = function () {
21 |       warn(`$props is readonly.`, this)
22 |     }
23 |   }
24 |   // 注意是定义到原型对象上的而不是定义在实例上
25 |   // 这样只需定义一次
26 |   // 类似的操作还有Vue.extend创建子类时代理公有的computed和props
27 |   Object.defineProperty(Vue.prototype, '$data', dataDef)
28 |   Object.defineProperty(Vue.prototype, '$props', propsDef)
29 | ```


--------------------------------------------------------------------------------
/init/computed.md:
--------------------------------------------------------------------------------
 1 | computed的实现就是利用了Watcher类。它仅有一个数据获取函数，而数据更新时的回调是空函数。
 2 | 
 3 | ```javascript
 4 | function initComputed (vm, computed) {
 5 |   // 一个vue实例所有computed对应的watcher都保存在这
 6 |   var watchers = vm._computedWatchers = Object.create(null);
 7 | 
 8 |   for (var key in computed) {
 9 |     var userDef = computed[key];
10 |     // 确定数据获取函数
11 |     var getter = typeof userDef === 'function' ? userDef : userDef.get;
12 |     {
13 |       if (getter === undefined) {
14 |         warn(
15 |           ("No getter function has been defined for computed property \"" + key + "\"."),
16 |           vm
17 |         );
18 |         getter = noop;
19 |       }
20 |     }
21 | 
22 |     // 通过watcher实现computed功能
23 |     watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions);
24 | 
25 |     if (!(key in vm)) {
26 |       // 让vue实例代理这个computed属性
27 |       defineComputed(vm, key, userDef);
28 |     } else {
29 |       if (key in vm.$data) {
30 |         warn(("The computed property \"" + key + "\" is already defined in data."), vm);
31 |       } else if (vm.$options.props && key in vm.$options.props) {
32 |         warn(("The computed property \"" + key + "\" is already defined as a prop."), vm);
33 |       }
34 |     }
35 |   }
36 | }
37 | ```
38 | 
39 | 关于computed对应的watcher的选项有必要多说两句。```var computedWatcherOptions = { lazy: true };```。这个设定使得dep通知watcher数据变化时，watcher并不立即重新计算相应的值，而是先标记一下当前数据是脏数据，当我们真的需要这个计算属性的时候再去计算(下面代码中```evaluate```方法)。
40 | 
41 | 
42 | ```javascript
43 | // 绑定到vm上
44 | function defineComputed (target, key, userDef) {
45 |   if (typeof userDef === 'function') {
46 |     sharedPropertyDefinition.get = createComputedGetter(key);
47 |     sharedPropertyDefinition.set = noop;
48 |   } else {
49 |     // 计算getter默认是从watcher中获取值
50 |     // 通过设置cache属性控制getter是否强制重算
51 |     sharedPropertyDefinition.get = userDef.get
52 |       ? userDef.cache !== false
53 |         ? createComputedGetter(key)
54 |         : userDef.get
55 |       : noop;
56 | 
57 |     // 允许设定计算setter
58 |     sharedPropertyDefinition.set = userDef.set
59 |       ? userDef.set
60 |       : noop;
61 |   }
62 |   Object.defineProperty(target, key, sharedPropertyDefinition);
63 | }
64 | function createComputedGetter (key) {
65 |   return function computedGetter () {
66 |     // 注意定义成getter/setter形式时的this指向
67 |     var watcher = this._computedWatchers && this._computedWatchers[key];
68 |     if (watcher) {
69 |       // 标记数据有误，获取当前数据，否则直接返回缓存值
70 |       if (watcher.dirty) {
71 |         // evaluate 方法是lazy watcher专用
72 |         watcher.evaluate();
73 |       }
74 | 
75 | 
76 |       if (Dep.target) {
77 |         watcher.depend();
78 |       }
79 | 
80 |       // computed最终返回的是watcher的值
81 |       return watcher.value
82 |     }
83 |   }
84 | }
85 | ```
86 | 
87 | computed的每个属性绑定在vm上是通过```Object.defineProperty```实现的。
88 | 
89 | 最后要说明的是```watcher.depend();```这句话是干啥的。在讲Watcher的时候，提到过一个嵌套的问题，还是以当时的例子为例，当我们调用完watcherB的evaluate方法后，watcherB的依赖收集已经完成，现在```Dep.target```上挂的是watcherA，watcherA需要和watcherB所依赖的所有dep实例建立关联，所以这里watcherB调用depend方法，使相应的dep实例与watcherA建立关联。


--------------------------------------------------------------------------------
/init/data.md:
--------------------------------------------------------------------------------
 1 | data的初始化主要是利用了Observer类，在把数据变成响应式的时候也利用了Dep类。
 2 | 
 3 | ```javascript
 4 | function initData (vm) {
 5 |   var data = vm.$options.data;
 6 |   // 将数据以```_data```挂载到vm上
 7 |   data = vm._data = typeof data === 'function'
 8 |     ? getData(data, vm)
 9 |     : data || {};
10 | 
11 |   // data必须是个对象
12 |   if (!isPlainObject(data)) {
13 |     data = {};
14 |     "development" !== 'production' && warn(
15 |       'data functions should return an object:\n' +
16 |       'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
17 |       vm
18 |     );
19 |   }
20 | 
21 |   // 遍历data，并在vm上代理
22 |   var keys = Object.keys(data);
23 |   var props = vm.$options.props;
24 |   var i = keys.length;
25 |   while (i--) {
26 |     if (props && hasOwn(props, keys[i])) {
27 |       "development" !== 'production' && warn(
28 |         "The data property \"" + (keys[i]) + "\" is already declared as a prop. " +
29 |         "Use prop default value instead.",
30 |         vm
31 |       );
32 |     } else if (!isReserved(keys[i])) {
33 |       // 如果data的键名不是保留字，vm代理该属性
34 |       proxy(vm, "_data", keys[i]);
35 |     }
36 |   }
37 | 
38 | 
39 |   // 将数据变成响应式的
40 |   observe(data, true /* asRootData */);
41 | }
42 | ```
43 | 
44 | 这里主要做了两件事：
45 | 
46 | * 将数据变成响应式的(就是之前observer那一套)
47 | * 在vm上代理属性
48 | 
49 | 这里需要解释的是如何让vm代理这些属性的:
50 | 
51 | ```javasccript
52 | proxy(vm, "_data", keys[i]);
53 | function proxy (target, sourceKey, key) {
54 |   sharedPropertyDefinition.get = function proxyGetter () {
55 |     return this[sourceKey][key]
56 |   };
57 |   sharedPropertyDefinition.set = function proxySetter (val) {
58 |     this[sourceKey][key] = val;
59 |   };
60 |   // 代理功能的关键代码
61 |   Object.defineProperty(target, key, sharedPropertyDefinition);
62 | }
63 | ```
64 | 
65 | 当我们在某个属性字段的时候，我们实际上是访问的实例的```_data```下的对应字段，当然这些字段都变成响应式的了，我们会进入对应的getter。


--------------------------------------------------------------------------------
/init/methods.md:
--------------------------------------------------------------------------------
 1 | 经过strat提供的策略预处理之后，hash结构的methods以methods为标识符挂载到了vue实例的$options上，但是我们使用method的时候method是挂载在vue实例上的，下面的代码就是对应的实现
 2 | 
 3 | ```javascript
 4 | function initMethods (vm, methods) {
 5 |   var props = vm.$options.props;
 6 |   for (var key in methods) {
 7 |     // 绑定到vue实例上，解决this指向
 8 |     vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
 9 |     {
10 |       if (methods[key] == null) {
11 |         warn(
12 |           "method \"" + key + "\" has an undefined value in the component definition. " +
13 |           "Did you reference the function correctly?",
14 |           vm
15 |         );
16 |       }
17 |       if (props && hasOwn(props, key)) {
18 |         warn(
19 |           ("method \"" + key + "\" has already been defined as a prop."),
20 |           vm
21 |         );
22 |       }
23 |     }
24 |   }
25 | }
26 | ```
27 | 
28 | 要vue实例代理这些方法，只需要遍历赋值就好了。作者这里的```bind```方法不是Function原型上的bind方法，而是自行实现的，只处理了this。但是这里真的需要绑定this吗？我个人在使用的时候一般是以```this.methodName()```或者```vm.methodName()```的形式，这时候this的指向就是vm啊。我猜作者是考虑有人会这么用：```var mth = this.methodName;   mth();```。
29 | 
30 | 
31 | 
32 | 至于这里的```props```暂不涉及。
33 | 
34 | 


--------------------------------------------------------------------------------
/init/mixin.md:
--------------------------------------------------------------------------------
 1 | mixin本质上是props、data、method、computed、watch、component、directive、filter的大杂烩，在地位上低于component，一般是作为组件的组成部分来使用。
 2 | 
 3 | 对于实例选项中mixin的预处理，实质上是对props等选项的预处理，
 4 | 
 5 | ```javascript
 6 | // 运用上一节提到的预处理策略合并选项
 7 | export function mergeOptions (
 8 |   parent: Object,
 9 |   child: Object,
10 |   vm?: Component
11 | ): Object {
12 |   if (process.env.NODE_ENV !== 'production') {
13 |     checkComponents(child)
14 |   }
15 | 
16 |   if (typeof child === 'function') {
17 |     child = child.options
18 |   }
19 | 
20 |   normalizeProps(child)
21 |   normalizeDirectives(child)
22 |   const extendsFrom = child.extends
23 |   if (extendsFrom) {
24 |     parent = mergeOptions(parent, extendsFrom, vm)
25 |   }
26 |   // mixin是选项的集合，调用mergeOptions合并选项
27 |   if (child.mixins) {
28 |     for (let i = 0, l = child.mixins.length; i < l; i++) {
29 |       parent = mergeOptions(parent, child.mixins[i], vm)
30 |     }
31 |   }
32 |   const options = {}
33 |   let key
34 |   // merge parent上的选项
35 |   for (key in parent) {
36 |     mergeField(key)
37 |   }
38 |   // merge child独有的选项
39 |   for (key in child) {
40 |     if (!hasOwn(parent, key)) {
41 |       mergeField(key)
42 |     }
43 |   }
44 |   // 选择不同的merge策略合并选项参数
45 |   function mergeField (key) {
46 |     const strat = strats[key] || defaultStrat
47 |     options[key] = strat(parent[key], child[key], vm, key)
48 |   }
49 |   return options
50 | }
51 | ```


--------------------------------------------------------------------------------
/init/props.md:
--------------------------------------------------------------------------------
  1 | props属性一般是用在子实例上，但是Vue也允许应用到根实例上。与props配合使用的是propsData属性，这个属性似乎比较陌生，因为主要是Vue内部使用的。子实例要获取父实例传下来的值，就要通过propsData。
  2 | 
  3 | ```javascript
  4 | // 初始化props
  5 | function initProps (vm: Component, propsOptions: Object) {
  6 |   const propsData = vm.$options.propsData || {}
  7 |   const props = vm._props = {}
  8 | 
  9 |   // 注释里说是为了更新props属性时能够通过数组快速迭代，才有这个_propKeys
 10 |   const keys = vm.$options._propKeys = []
 11 |   const isRoot = !vm.$parent
 12 | 
 13 |   // observerState.shouldConvert 是用来控制是否实例化Observer的
 14 |   // 对于子实例来说，如果某个props属性是对象/数组，对其进一步的observe是没有意义的
 15 |   // 对于根实例，一般而言没有props和propsData，有propsData的话需要观察
 16 |   observerState.shouldConvert = isRoot
 17 |   for (const key in propsOptions) {
 18 |     keys.push(key)
 19 | 
 20 |     // 验证propsData传下来的值是否合法
 21 |     // 必要时赋默认值
 22 |     const value = validateProp(key, propsOptions, propsData, vm)
 23 | 
 24 | 
 25 |     // 把props变成响应式的
 26 |     if (process.env.NODE_ENV !== 'production') {
 27 |       if (isReservedProp[key] || config.isReservedAttr(key)) {
 28 |         warn(
 29 |           `"${key}" is a reserved attribute and cannot be used as component prop.`,
 30 |           vm
 31 |         )
 32 |       }
 33 |       defineReactive(props, key, value, () => {
 34 |         if (vm.$parent && !observerState.isSettingProps) {
 35 |           warn(
 36 |             `Avoid mutating a prop directly since the value will be ` +
 37 |             `overwritten whenever the parent component re-renders. ` +
 38 |             `Instead, use a data or computed property based on the prop's ` +
 39 |             `value. Prop being mutated: "${key}"`,
 40 |             vm
 41 |           )
 42 |         }
 43 |       })
 44 |     } else {
 45 |       defineReactive(props, key, value)
 46 |     }
 47 | 
 48 |     // 类似于data，将props的每一个属性代理到实例上
 49 |     // 实现原理依然是Object.defineProperty 利用get set
 50 |     if (!(key in vm)) {
 51 |       proxy(vm, `_props`, key)
 52 |     }
 53 |   }
 54 |   // 后面要初始化的data需要观察，因此shouldConvert需要置为true
 55 |   observerState.shouldConvert = true
 56 | }
 57 | ```
 58 | 
 59 | props初始化和data初始化非常类似，都包含把数据变为响应式的，代理到实例上，只是value来源不一样。props的value来自于父组件，相对data初始化来说就多一步校验value合法性。
 60 | 
 61 | ```javascript
 62 | // 校验props合法性，返回合法的props值
 63 | export function validateProp (
 64 |   key: string,
 65 |   propOptions: Object,
 66 |   propsData: Object,
 67 |   vm?: Component
 68 | ): any {
 69 |   const prop = propOptions[key]
 70 |   const absent = !hasOwn(propsData, key)
 71 | 
 72 |   // 从propsData获取父组件传递下来的值
 73 |   let value = propsData[key]
 74 | 
 75 |   // 布尔属性特殊处理
 76 |   // 类似于HTML5的布尔属性，vue的布尔属性也是只要声明置为true
 77 |   if (isType(Boolean, prop.type)) {
 78 |     if (absent && !hasOwn(prop, 'default')) {
 79 |       value = false
 80 |     } else if (!isType(String, prop.type) && (value === '' || value === hyphenate(key))) {
 81 |       value = true
 82 |     }
 83 |   }
 84 |   // 父实例没有传递下来值，采用默认值
 85 |   if (value === undefined) {
 86 |     value = getPropDefaultValue(vm, prop, key)
 87 |     // 默认值是新值，需要被观察
 88 |     const prevShouldConvert = observerState.shouldConvert
 89 |     observerState.shouldConvert = true
 90 |     observe(value)
 91 |     observerState.shouldConvert = prevShouldConvert
 92 |   }
 93 | 
 94 |   // 这一块是负责required和validator两个属性
 95 |   if (process.env.NODE_ENV !== 'production') {
 96 |     assertProp(prop, key, value, vm, absent)
 97 |   }
 98 |   return value
 99 | }
100 | ```


--------------------------------------------------------------------------------
/init/provide_inject.md:
--------------------------------------------------------------------------------
 1 | provide/inject功能是vue2.2.0版本开始提供的，用于向子组件注入数据。
 2 | 
 3 | 在时间顺序上，初始化inject要在初始化 method、data、computed、watch之前，而初始化provide要在初始化前几个字段之后：
 4 | 
 5 | ```javascript
 6 | callHook(vm, 'beforeCreate')
 7 | // 初始化inject
 8 | initInjections(vm)
 9 | // 初始化method、data、computed、watch
10 | initState(vm)
11 | // 初始化provide
12 | initProvide(vm)
13 | callHook(vm, 'created')
14 | ```
15 | 
16 | provide是祖先组件的行为，它所做的只是把需要provide的属性挂到实例属性_provided上：
17 | 
18 | ```javascript
19 | function initProvide (vm: Component) {
20 |   const provide = vm.$options.provide
21 |   if (provide) {
22 |     // 把provide的值挂到_provided，为了子组件去访问
23 |     vm._provided = typeof provide === 'function'
24 |       ? provide.call(vm)
25 |       : provide
26 |   }
27 | }
28 | ```
29 | 
30 | 祖先组件声明了provide的属性，后代组件就可以通过inject获取这些属性：
31 | 
32 | ```javascript
33 | export function resolveInject (inject: any, vm: Component): ?Object {
34 |   if (inject) {
35 |     // inject 可以是个数组，也可以是个对象
36 |     // 对象形式是为了为inject的属性提供一个本地名称
37 |     // 防止和其它字段名称冲突
38 |     const isArray = Array.isArray(inject)
39 |     const result = Object.create(null)
40 |     const keys = isArray
41 |       ? inject
42 |       : hasSymbol
43 |         ? Reflect.ownKeys(inject)
44 |         : Object.keys(inject)
45 | 
46 |     for (let i = 0; i < keys.length; i++) {
47 |       const key = keys[i]
48 |       const provideKey = isArray ? key : inject[key]
49 |       // 核心是沿着组件树向上查找节点的_provided是否有对应属性
50 |       // 话说第一次查找不应该是vm.$parent吗？找自己的干啥。
51 |       let source = vm
52 |       while (source) {
53 |         if (source._provided && provideKey in source._provided) {
54 |           result[key] = source._provided[provideKey]
55 |           break
56 |         }
57 |         source = source.$parent
58 |       }
59 |     }
60 |     return result
61 |   }
62 | }
63 | export function initInjections (vm: Component) {
64 |   const result = resolveInject(vm.$options.inject, vm)
65 |   if (result) {
66 |     // 把inject的数据绑定到vm上
67 |     // 把inject的数据变成响应式的
68 |     // 然而只有provide的数据是响应式的时候inject数据的响应式才有意义
69 |     Object.keys(result).forEach(key => {
70 |       if (process.env.NODE_ENV !== 'production') {
71 |         defineReactive(vm, key, result[key], () => {
72 |           warn(
73 |             `Avoid mutating an injected value directly since the changes will be ` +
74 |             `overwritten whenever the provided component re-renders. ` +
75 |             `injection being mutated: "${key}"`,
76 |             vm
77 |           )
78 |         })
79 |       } else {
80 |         defineReactive(vm, key, result[key])
81 |       }
82 |     })
83 |   }
84 | }
85 | ```
86 | 
87 | 虽然现在vue版本已经到了2.5了，我依然没见人用过这两个属性，介绍的文章也不多，[这篇文章提到一个简单地例子(请自备梯子)](https://medium.com/@znck/provide-inject-in-vue-2-2-b6473a7f7816)


--------------------------------------------------------------------------------
/init/strats.md:
--------------------------------------------------------------------------------
  1 | 当获取一个vue实例的时候，首先要做的是对传入的参数做一些预处理，参数不同字段的处理方法是不同的，这些不同的处理策略挂到了```strats```这个对象上。需要提前说明的是有些字段是预置的，所以下面代码中会有```parent```和```child```，前者是预置的，后者是我们传入的。
  2 | 
  3 | 每一个处理方法都会按序传入下面四个参数：parent字段值、child字段值、vm Vue实例、要处理的字段。
  4 | 
  5 | 
  6 | #### 默认处理策略
  7 | 
  8 | 默认处理策略的规则是如果有child就返回child，否则返回parent。
  9 | 
 10 | ```javascript
 11 | var defaultStrat = function (parentVal, childVal) {
 12 |   return childVal === undefined
 13 |     ? parentVal
 14 |     : childVal
 15 | };
 16 | ```
 17 | 
 18 | 这一个策略是兜底处理策略，源码中只提到el字段采用这一策略，其实template、render以及我们自定义传入的字段都会默认采用这一策略(自定义字段可以[自定义处理策略](https://cn.vuejs.org/v2/api/#optionMergeStrategies))。
 19 | 
 20 | 
 21 | #### 数组化处理策略
 22 | 
 23 | 这个策略考虑的是parent和child都有相关字段，而且都要进行保留，于是就把他们放在了一个数组中了。比如说各种钩子、watch字段。
 24 | 
 25 | ```javascript
 26 | // watch处理策略
 27 | strats.watch = function (parentVal, childVal) {
 28 |   // 其实watch的数组化处理是不完全的
 29 |   // 所以在初始化watch的时候会有判断是不是数组
 30 |   if (!childVal) { return Object.create(parentVal || null) }
 31 |   if (!parentVal) { return childVal }
 32 |   var ret = {};
 33 |   extend(ret, parentVal);
 34 |   for (var key in childVal) {
 35 |     var parent = ret[key];
 36 |     var child = childVal[key];
 37 |     if (parent && !Array.isArray(parent)) {
 38 |       parent = [parent];
 39 |     }
 40 |     ret[key] = parent
 41 |       ? parent.concat(child)
 42 |       : [child];
 43 |   }
 44 |   return ret
 45 | };
 46 | 
 47 | // 钩子处理策略
 48 | function mergeHook (
 49 |   parentVal: ?Array<Function>,
 50 |   childVal: ?Function | ?Array<Function>
 51 | ): ?Array<Function> {
 52 |   return childVal
 53 |     ? parentVal
 54 |       ? parentVal.concat(childVal)
 55 |       : Array.isArray(childVal)
 56 |         ? childVal
 57 |         : [childVal]
 58 |     : parentVal
 59 | }
 60 | ```
 61 | 
 62 | #### 覆盖处理策略
 63 | 
 64 | 同样是parent和child都有相关字段，这个处理方式考虑的是抛弃掉parent的相关字段，采用child的字段。这个处理方式适用于methods、computed和props。
 65 | 
 66 | ```javascript
 67 | strats.props =
 68 | strats.methods =
 69 | strats.computed = function (parentVal, childVal) {
 70 |   if (!childVal) { return Object.create(parentVal || null) }
 71 |   if (!parentVal) { return childVal }
 72 |   var ret = Object.create(null);
 73 |   extend(ret, parentVal);
 74 |   extend(ret, childVal);
 75 |   return ret
 76 | };
 77 | ```
 78 | 
 79 | 采用同样思路的还有对资源(component、directive、filter)的处理上：
 80 | 
 81 | ```javascript
 82 | function mergeAssets (parentVal: ?Object, childVal: ?Object): Object {
 83 |   const res = Object.create(parentVal || null)
 84 |   return childVal
 85 |     ? extend(res, childVal)
 86 |     : res
 87 | }
 88 | ```
 89 | 
 90 | #### data处理策略
 91 | 
 92 | data的处理相对比较复杂，主要是牵扯到是在实例上调用合并还是在创造子类(Vue.extend)时调用合并。
 93 | 
 94 | ```javascript
 95 | strats.data = function (
 96 |   parentVal: any,
 97 |   childVal: any,
 98 |   vm?: Component
 99 | ): ?Function {
100 |   // Vue.extend 时的合并策略
101 |   if (!vm) {
102 | 
103 |     if (!childVal) {
104 |       return parentVal
105 |     }
106 | 
107 |     // child类型必须为function
108 |     // 因为考虑到引用类型的问题
109 |     if (typeof childVal !== 'function') {
110 |       process.env.NODE_ENV !== 'production' && warn(
111 |         'The "data" option should be a function ' +
112 |         'that returns a per-instance value in component ' +
113 |         'definitions.',
114 |         vm
115 |       )
116 |       return parentVal
117 |     }
118 |     // 直接Vue.extend是没有parentVal的
119 |     // Vue子类调用extend方法才有parentVal
120 |     // 因为是子类，其data应为function类型(如果有的话)
121 |     if (!parentVal) {
122 |       return childVal
123 |     }
124 | 
125 |     // 到这里是Vue的子类调用extend方法
126 |     // 而且都有data值(都是函数类型)
127 |     // Vue的extend方法返回的是新子类，data应为function类型
128 |     return function mergedDataFn () {
129 |       // 把data值合并
130 |       return mergeData(
131 |         childVal.call(this),
132 |         parentVal.call(this)
133 |       )
134 |     }
135 |   } else if (parentVal || childVal) {
136 |   // 实例上合并data
137 |     return function mergedInstanceDataFn () {
138 |       // 子实例的data
139 |       const instanceData = typeof childVal === 'function'
140 |         ? childVal.call(vm)
141 |         : childVal
142 |       // 父类的data
143 |       const defaultData = typeof parentVal === 'function'
144 |         ? parentVal.call(vm)
145 |         : undefined
146 |       if (instanceData) {
147 |         return mergeData(instanceData, defaultData)
148 |       } else {
149 |         return defaultData
150 |       }
151 |     }
152 |   }
153 | }
154 | ```
155 | 
156 | data合并策略还有一点要注意的是最终返回的是一个函数，这个函数调用才返回合并后的data。


--------------------------------------------------------------------------------
/init/watch.md:
--------------------------------------------------------------------------------
 1 | watch这个功能的实现本身也是利用了Watcher类
 2 | 
 3 | ```javascript
 4 | function initWatch (vm, watch) {
 5 |   for (var key in watch) {
 6 |     var handler = watch[key];
 7 |     if (Array.isArray(handler)) {
 8 |       // 观察一个属性，有多个回调
 9 |       for (var i = 0; i < handler.length; i++) {
10 |         createWatcher(vm, key, handler[i]);
11 |       }
12 |     } else {
13 |       createWatcher(vm, key, handler);
14 |     }
15 |   }
16 | }
17 | 
18 | function createWatcher (vm, key, handler) {
19 |   var options;
20 |   // 允许传入options字段
21 |   if (isPlainObject(handler)) {
22 |     options = handler;
23 |     handler = handler.handler;
24 |   }
25 | 
26 |   // 回调可以是vm实例上的方法(一般而言是传入的method)
27 |   if (typeof handler === 'string') {
28 |     handler = vm[handler];
29 |   }
30 | 
31 |   // 调用实例上的$watch，最终是实例化一个Watcher
32 |   vm.$watch(key, handler, options);
33 | }
34 | ```
35 | 
36 | 了解了Watcher是如何实现的，这里就没什么难度了，只是对参数做了必要的预处理而已。


--------------------------------------------------------------------------------
/reactivity/README.md:
--------------------------------------------------------------------------------
1 | 数据响应系统是Vue第一块核心实现，在这里我会说明相关的Dep、Observer、Watcher类是如何围绕着数据工作的，我会说明数据响应系统是如何实现的，包括如何观察对象、如何观察数组、如何通知，在简单说明几个相关API之后我会说明Vue的异步更新队列是如何工作的。


--------------------------------------------------------------------------------
/reactivity/delete.md:
--------------------------------------------------------------------------------
 1 | 由于Vue的实现机制，删除对象的某个属性是无法被监听到的，```$delete```这个API就是设计出来解决这个问题的。
 2 | 
 3 | ```javascript
 4 | function del (target, key) {
 5 |   // 删除数组元素，走重载的变异方法
 6 |   if (Array.isArray(target) && typeof key === 'number') {
 7 |     target.splice(key, 1);
 8 |     return
 9 |   }
10 |   var ob = (target ).__ob__;
11 |   // 不能删除vue实例或者跟数据元素上的属性
12 |   if (target._isVue || (ob && ob.vmCount)) {
13 |     "development" !== 'production' && warn(
14 |       'Avoid deleting properties on a Vue instance or its root $data ' +
15 |       '- just set it to null.'
16 |     );
17 |     return
18 |   }
19 |   if (!hasOwn(target, key)) {
20 |     return
21 |   }
22 | 
23 |   // 对象的删除元素
24 |   delete target[key];
25 |   if (!ob) {
26 |     return
27 |   }
28 | 
29 |   // 通知watcher数据更新
30 |   ob.dep.notify();
31 | }
32 | ```


--------------------------------------------------------------------------------
/reactivity/dep.md:
--------------------------------------------------------------------------------
 1 | Dep类是用来将数据和watcher关联起来的一个类。
 2 | 
 3 | 
 4 | ```javascript
 5 | var uid = 0;
 6 | 
 7 | var Dep = function Dep () {
 8 |   this.id = uid++;
 9 |   this.subs = [];
10 | };
11 | 
12 | // 添加对某个watcher的关联
13 | Dep.prototype.addSub = function addSub (sub) {
14 |   this.subs.push(sub);
15 | };
16 | 
17 | // 解除对某个watcher的关联
18 | Dep.prototype.removeSub = function removeSub (sub) {
19 |   remove(this.subs, sub);
20 | };
21 | 
22 | // dep和watcher相互关联的入口
23 | Dep.prototype.depend = function depend () {
24 |   // Dep.target 期望存放watcher实例
25 |   if (Dep.target) {
26 |   	// watcher添加对dep的关联，同时在内部调用dep的addSub方法，添加dep对watcher的关联
27 |     Dep.target.addDep(this);
28 |   }
29 | };
30 | 
31 | // 通知watcher数据更新
32 | Dep.prototype.notify = function notify () {
33 |   var subs = this.subs.slice();
34 |   for (var i = 0, l = subs.length; i < l; i++) {
35 |     subs[i].update();
36 |   }
37 | };
38 | ```
39 | 
40 | 每一个dep实例都会有一个唯一的id，这个唯一标示会在watcher实例中用到。dep实例的核心是```subs```字段，它维护一个watcher队列，当时据变化时通知watcher数据更新(notify方法)。
41 | 
42 | deps和watcher是相互关联的，可以想到watcher也会维护一个deps队列。dep和watcher建立联系的入口是```depend```方法，你可能会好奇为什么要有这么个入口，你可能试着去掉```depend```方法然后把相互关联功能放到addSub方法中：
43 | 
44 | ```javascript
45 | Dep.prototype.addSub = function(){
46 |   var watcher = Dep.target;
47 | 	if(!watcher){
48 | 		return;
49 | 	}
50 | 	// 判断watcher是否关联到了dep
51 | 	if(watcher.deps.indexOf(this)===-1){
52 | 		watcher.deps.push(this);
53 | 	}
54 | 	// 判断dep是否关联到了watcher
55 | 	if(this.subs.indexOf(watcher)===-1){
56 | 		this.subs.push(watcher);
57 | 	}
58 | }
59 | ```
60 | 
61 | 这么做确实可行，但是这么做时间上比较吃亏(判断是否建立了关系需要O(n))，所以作者把是否建立了联系这个判断放在了watcher中，利用集合实现(时间O(1))。
62 | 
63 | ```javascript
64 | Watcher.prototype.addDep = function addDep (dep) {
65 |   // newDepIds和depIds都是集合
66 |   var id = dep.id;
67 |   // 判断watcher是否关联到了dep
68 |   if (!this.newDepIds.has(id)) {
69 |     this.newDepIds.add(id);
70 |     this.newDeps.push(dep);
71 |     // 判断dep是否关联到了watcher
72 |     if (!this.depIds.has(id)) {
73 |       dep.addSub(this);
74 |     }
75 |   }
76 | };
77 | ```


--------------------------------------------------------------------------------
/reactivity/nexttick.md:
--------------------------------------------------------------------------------
  1 | 在讲Watcher类的时候，提到有一个```sync```字段，这个字段表示dep通知watcher更新的时候，watcher是同步更新还是异步更新。关于异步更新，Vue暴露了两个API：```Vue.nextTick```和```Vue.prototype.$nextTick```，这两个API都依赖于下面一段代码：
  2 | 
  3 | ```javascript
  4 | var nextTick = (function () {
  5 |   // 回调队列
  6 |   var callbacks = [];
  7 | 
  8 |   // 是否在等待执行任务
  9 |   var pending = false;
 10 | 
 11 |   // 异步实现函数，异步调用nextTickHandler
 12 |   var timerFunc;
 13 | 
 14 |   // 执行回调队列中的回调
 15 |   function nextTickHandler () {
 16 |     // 允许调用timerFunc
 17 |     pending = false;
 18 |     var copies = callbacks.slice(0);
 19 |     // 清空回调队列
 20 |     callbacks.length = 0;
 21 |     // 执行回调，执行中可能添加新回调，因而长度不能缓存
 22 |     for (var i = 0; i < copies.length; i++) {
 23 |       copies[i]();
 24 |     }
 25 |   }
 26 | 
 27 |   // 针对不同浏览器使用不同异步实现方案
 28 |   if (typeof Promise !== 'undefined' && isNative(Promise)) {
 29 |     var p = Promise.resolve();
 30 |     var logError = function (err) { console.error(err); };
 31 |     timerFunc = function () {
 32 |       p.then(nextTickHandler).catch(logError);
 33 |       if (isIOS) { setTimeout(noop); }
 34 |     };
 35 |   } else if (typeof MutationObserver !== 'undefined' && (
 36 |     isNative(MutationObserver) ||
 37 |     MutationObserver.toString() === '[object MutationObserverConstructor]'
 38 |   )) {
 39 |     var counter = 1;
 40 |     var observer = new MutationObserver(nextTickHandler);
 41 |     var textNode = document.createTextNode(String(counter));
 42 |     observer.observe(textNode, {
 43 |       characterData: true
 44 |     });
 45 |     timerFunc = function () {
 46 |       counter = (counter + 1) % 2;
 47 |       textNode.data = String(counter);
 48 |     };
 49 |   } else {
 50 |     timerFunc = function () {
 51 |       setTimeout(nextTickHandler, 0);
 52 |     };
 53 |   }
 54 | 
 55 |   return function queueNextTick (cb, ctx) {
 56 |     var _resolve;
 57 |     // 向回调队列添加任务
 58 |     callbacks.push(function () {
 59 |       if (cb) {
 60 |         try {
 61 |           cb.call(ctx);
 62 |         } catch (e) {
 63 |           handleError(e, ctx, 'nextTick');
 64 |         }
 65 |       } else if (_resolve) {
 66 |         _resolve(ctx);
 67 |       }
 68 |     });
 69 |     // timerFunc一次调用就会异步处理完整个回调队列
 70 |     // 所以在此期间只需要向任务队列添回调，无需重复调用timerFunc
 71 |     if (!pending) {
 72 |       pending = true;
 73 |       timerFunc();
 74 |     }
 75 |     if (!cb && typeof Promise !== 'undefined') {
 76 |       return new Promise(function (resolve, reject) {
 77 |         _resolve = resolve;
 78 |       })
 79 |     }
 80 |   }
 81 | })();
 82 | ```
 83 | 
 84 | 为了实现异步，Vue会依次尝试```Promise```方案、```MutationObserver```方案和```setTimeout```方案，并最终暴露出一个```timerFunc```。调用```timerFunc```后，会异步执行完回调队列(callbacks)内的回调。
 85 | 
 86 | 
 87 | 对于watcher来说，一般更新是异步的，这样可以实现即使一个watcher被多次触发，也仅会向队列中添加一次，避免不必要的运算。在watcher的```update```方法中，会调用```queueWatcher```将watcher推入队列。
 88 | 
 89 | 
 90 | ```javascript
 91 | // 用于快速判断watcher是否已经加入了queue
 92 | var has = {};
 93 | 
 94 | // 表示是否正在处理queue中的watcher
 95 | var flushing = false;
 96 | 
 97 | // 正在处理的watcher在queue的索引
 98 | var index = 0;
 99 | 
100 | // 类似于nextTick的pending
101 | var waiting = false;
102 | 
103 | // 待更新的watcher队列
104 | var queue = [];
105 | 
106 | function queueWatcher (watcher) {
107 |   var id = watcher.id;
108 |   // 去重，避免多次更新
109 |   if (has[id] == null) {
110 |     has[id] = true;
111 | 
112 |     // 没有处理watcher队列，向队列插入
113 |     if (!flushing) {
114 |       queue.push(watcher);
115 |     } else {
116 |       // 如果正在处理watcher队列，将watcher加入到合适的位置
117 |       var i = queue.length - 1;
118 |       while (i >= 0 && queue[i].id > watcher.id) {
119 |         i--;
120 |       }
121 |       queue.splice(Math.max(i, index) + 1, 0, watcher);
122 |     }
123 |     // flushSchedulerQueue执行一次会处理整个queue
124 |     if (!waiting) {
125 |       waiting = true;
126 |       nextTick(flushSchedulerQueue);
127 |     }
128 |   }
129 | }
130 | ```
131 | 
132 | queueWatcher主要完成的是将watcher推入一个队列，但是这个推入的位置比较有讲究。如果watcher队列没有正在处理，push进去即可(反正最后还要重排)，如果watcher队列被正在处理，显然插入的位置要在当前处理位置(index)之后，由于此时watcher队列中的watcher已经按照升序排好了，新加入watcher要保证未处理的watcher依然按照id增序排列，所以才有了```queue.splice(Math.max(i, index) + 1, 0, watcher);```，这也意味着即使watcher队列在处理中，其长度也是可以改变的。
133 | 
134 | 
135 | ```javascript
136 | // 处理watcher队列
137 | function flushSchedulerQueue () {
138 |   // 开始处理watcher队列
139 |   flushing = true;
140 |   var watcher, id;
141 | 
142 |   // 按照id升序对watcher排序
143 |   queue.sort(function (a, b) { return a.id - b.id; });
144 | 
145 |   // 遍历处理watcher，不缓存队列的长度，因为处理过程中可能有新的watcher加入
146 |   for (index = 0; index < queue.length; index++) {
147 |     watcher = queue[index];
148 |     id = watcher.id;
149 |     has[id] = null;
150 | 
151 |     // 更新watcher的值，处理watcher的回调，最核心的一句
152 |     watcher.run();
153 | 
154 |     if ("development" !== 'production' && has[id] != null) {
155 |       circular[id] = (circular[id] || 0) + 1;
156 |       if (circular[id] > MAX_UPDATE_COUNT) {
157 |         warn(
158 |           'You may have an infinite update loop ' + (
159 |             watcher.user
160 |               ? ("in watcher with expression \"" + (watcher.expression) + "\"")
161 |               : "in a component render function."
162 |           ),
163 |           watcher.vm
164 |         );
165 |         break
166 |       }
167 |     }
168 |   }
169 | 
170 |   
171 |   var activatedQueue = activatedChildren.slice();
172 |   var updatedQueue = queue.slice();
173 | 
174 |   // 相关属性重置
175 |   resetSchedulerState();
176 | 
177 | 
178 |   callActivatedHooks(activatedQueue);
179 | 
180 |   // 对于负责render的watcher，要调用update钩子
181 |   callUpdateHooks(updatedQueue);
182 | 
183 | 
184 |   if (devtools && config.devtools) {
185 |     devtools.emit('flush');
186 |   }
187 | }
188 | 
189 | // 重置watcher 队列和相关属性
190 | function resetSchedulerState () {
191 | 
192 |   queue.length = activatedChildren.length = 0;
193 |   has = {};
194 |   {
195 |     circular = {};
196 |   }
197 |   waiting = flushing = false;
198 | }
199 | ```
200 | 
201 | 处理watcher队列时有一步是对watcher队列按照id升序排序，作者提到了以下三个原因：
202 | 
203 | * 保证先父元素再子元素
204 | * 保证用户创建的watcher(computed和watch的)先于负责render的watcher
205 | * 如果父组件watcher更新时，子组件watcher被销毁，可以跳过这个子组件的watcher


--------------------------------------------------------------------------------
/reactivity/observer.md:
--------------------------------------------------------------------------------
  1 | Observer类负责将数据转换为响应式的。Observer所处理的数据是对象/数组，所以它需要一个入口提前处理异常值。
  2 | 
  3 | ```javascript
  4 | // 获得observer实例的入口
  5 | function observe (value, asRootData) {
  6 |   // 筛出异常值
  7 |   if (!isObject(value)) {
  8 |     return
  9 |   }
 10 |   var ob;
 11 |   // 数据已经建立关联的observer实例就不再重复建立
 12 |   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
 13 |     ob = value.__ob__;
 14 |   } else if (
 15 |     observerState.shouldConvert &&
 16 |     !isServerRendering() &&
 17 |     (Array.isArray(value) || isPlainObject(value)) &&
 18 |     Object.isExtensible(value) &&
 19 |     !value._isVue
 20 |   ) {
 21 |     ob = new Observer(value);
 22 |   }
 23 |   if (asRootData && ob) {
 24 |     ob.vmCount++;
 25 |   }
 26 |   return ob
 27 | }
 28 | ```
 29 | 
 30 | Observer与数据相互关联，然后将数据转化为响应式的：
 31 | 
 32 | ```javascript
 33 | var Observer = function Observer (value) {
 34 |   // observer关联到数据
 35 |   this.value = value;
 36 |   this.dep = new Dep();
 37 |   // vmCount一个用途是表明是否是根数据元素，TODO
 38 |   this.vmCount = 0;
 39 |   // 数据关联到observer
 40 |   def(value, '__ob__', this);
 41 |   // 数组和对象分别处理
 42 |   if (Array.isArray(value)) {
 43 |     var augment = hasProto
 44 |       ? protoAugment
 45 |       : copyAugment;
 46 |     augment(value, arrayMethods, arrayKeys);
 47 |     this.observeArray(value);
 48 |   } else {
 49 |     this.walk(value);
 50 |   }
 51 | };
 52 | // 对object的属性观察
 53 | Observer.prototype.walk = function walk (obj) {
 54 |   var keys = Object.keys(obj);
 55 |   for (var i = 0; i < keys.length; i++) {
 56 |     defineReactive$$1(obj, keys[i], obj[keys[i]]);
 57 |   }
 58 | };
 59 | // 对array的元素观察
 60 | Observer.prototype.observeArray = function observeArray (items) {
 61 |   for (var i = 0, l = items.length; i < l; i++) {
 62 |     observe(items[i]);
 63 |   }
 64 | };
 65 | ```
 66 | 
 67 | 我们先看如何把对象的元素变成响应式的：
 68 | 
 69 | ```javascript
 70 | function defineReactive$$1 (obj,key,val,customSetter) {
 71 |   // 与这个元素关联的dep实例
 72 |   var dep = new Dep();
 73 | 
 74 |   var property = Object.getOwnPropertyDescriptor(obj, key);
 75 |   if (property && property.configurable === false) {
 76 |     return
 77 |   }
 78 | 
 79 |   var getter = property && property.get;
 80 |   var setter = property && property.set;
 81 | 
 82 |   var childOb = observe(val);
 83 |   Object.defineProperty(obj, key, {
 84 |     enumerable: true,
 85 |     configurable: true,
 86 |     get: function reactiveGetter () {
 87 |       var value = getter ? getter.call(obj) : val;
 88 |       // 收集依赖的原理
 89 |       if (Dep.target) {
 90 |         dep.depend();
 91 |         // childOb对应的dep也要收集依赖，因为两个dep反应的是同一个对象与watcher的关系
 92 |         if (childOb) {
 93 |           childOb.dep.depend();
 94 |         }
 95 |         // 值为数组，深度观察
 96 |         if (Array.isArray(value)) {
 97 |           dependArray(value);
 98 |         }
 99 |       }
100 |       return value
101 |     },
102 |     set: function reactiveSetter (newVal) {
103 |       var value = getter ? getter.call(obj) : val;
104 |       // 数据变化了才更新，考虑了NaN的情况
105 |       if (newVal === value || (newVal !== newVal && value !== value)) {
106 |         return
107 |       }
108 |       if ("development" !== 'production' && customSetter) {
109 |         customSetter();
110 |       }
111 |       if (setter) {
112 |         setter.call(obj, newVal);
113 |       } else {
114 |         val = newVal;
115 |       }
116 |       // 重新观察数据
117 |       childOb = observe(newVal);
118 |       // 通过dep通知watcher数据更新
119 |       dep.notify();
120 |     }
121 |   });
122 | }
123 | ```
124 | 
125 | 可能你已经听说过Vue使用```Object.defineProperty```检测数据变化，上面就是对应的核心实现。在get中dep与watcher建立关联，在set中dep通知watcher数据更新。
126 | 
127 | 
128 | 这种检测数据变化的方式有个问题，它无法观察数组的变化，Vue采取的解决方案是重载```push```、```pop```等常用数组方法。
129 | 
130 | ```javascript
131 | var arrayProto = Array.prototype;
132 | var arrayMethods = Object.create(arrayProto);
133 | [
134 |   'push',
135 |   'pop',
136 |   'shift',
137 |   'unshift',
138 |   'splice',
139 |   'sort',
140 |   'reverse'
141 | ]
142 | .forEach(function (method) {
143 |   // 缓存原始方法
144 |   var original = arrayProto[method];
145 |   // 定义重载的新方法
146 |   def(arrayMethods, method, function mutator () {
147 |     var arguments$1 = arguments;
148 | 
149 |     // avoid leaking arguments:
150 |     // http://jsperf.com/closure-with-arguments
151 |     var i = arguments.length;
152 |     var args = new Array(i);
153 |     while (i--) {
154 |       args[i] = arguments$1[i];
155 |     }
156 |     // 调用原始的方法
157 |     var result = original.apply(this, args);
158 |     var ob = this.__ob__;
159 |     var inserted;
160 |     switch (method) {
161 |       case 'push':
162 |         inserted = args;
163 |         break
164 |       case 'unshift':
165 |         inserted = args;
166 |         break
167 |       case 'splice':
168 |         inserted = args.slice(2);
169 |         break
170 |     }
171 |     // 观察新添加的数据
172 |     if (inserted) { ob.observeArray(inserted); }
173 | 
174 |     // observer实例上dep实例通知watcher数据更新
175 |     ob.dep.notify();
176 |     return result
177 |   });
178 | });
179 | var hasProto = '__proto__' in {};
180 | // 调用见Observer的构造函数
181 | // 相当于Object.setPrototypeOf方法
182 | function protoAugment (target, src) {
183 |   target.__proto__ = src;
184 | }
185 | 
186 | // 调用见Observer的构造函数
187 | function copyAugment (target, src, keys) {
188 |   for (var i = 0, l = keys.length; i < l; i++) {
189 |     var key = keys[i];
190 |     def(target, key, src[key]);
191 |   }
192 | }
193 | ```
194 | 
195 | 要理解上面这段代码，需要理解原型链的原理，在此基础上才能明白```arrayMethods```这个对象是如何起作用的。```protoAugment```方法是在要观察的数组和```Array.prototype```之间插了一层，当访问```push```等方法时，会使用```arrayMethods```上定义的相关方法。```copyAugment```是把```arrayMethods```上重载的几个方法关联到了要观察的数组上，当访问```push```等方法时，会直接访问自身的```push```方法。
196 | 
197 | 
198 | 对于一个对象，它可以有两个相关的dep实例，一个在defineReactive函数中生成(以下称为游离的dep实例)(更准确的说法是和键相关联的dep)，一个是在observer构造函数中生成(以下称为结合的dep实例)，因为这两个dep反应的数据是一个，所以对应的watcher也应一致，所以才有了```if (childOb) {childOb.dep.depend();}```。当为这个对象增加($set)或删除属性($delete)时，会通过结合的dep实例通知watcher。
199 | 
200 | 
201 | 对于一个数组，它只有一个相关的dep实例，是挂在observer上的，数组数据更新(在重载的变异方法中)需要通过这个dep实例通知watcher数据变化。


--------------------------------------------------------------------------------
/reactivity/set.md:
--------------------------------------------------------------------------------
 1 | 由于Vue的实现机制，为一个对象添加新属性是无法被监听到，```$set```这个API设计出来就是解决这个问题的。
 2 | 
 3 | ```javascript
 4 | function set (target, key, val) {
 5 |   // 对数组属性设定，走重载的变异方法
 6 |   if (Array.isArray(target) && typeof key === 'number') {
 7 |     target.length = Math.max(target.length, key);
 8 |     target.splice(key, 1, val);
 9 |     return val
10 |   }
11 |   // 已有属性，走setter那一套即可
12 |   if (hasOwn(target, key)) {
13 |     target[key] = val;
14 |     return val
15 |   }
16 |   // 数据相关的那个observer
17 |   var ob = (target ).__ob__;
18 | 
19 |   // 不能为vue实例和根数据对象添加属性
20 |   if (target._isVue || (ob && ob.vmCount)) {
21 |     "development" !== 'production' && warn(
22 |       'Avoid adding reactive properties to a Vue instance or its root $data ' +
23 |       'at runtime - declare it upfront in the data option.'
24 |     );
25 |     return val
26 |   }
27 | 
28 |   // 对象非响应式，直接赋值
29 |   if (!ob) {
30 |     target[key] = val;
31 |     return val
32 |   }
33 | 
34 |   // 为对象添加新属性，让新属性成为响应式的
35 |   defineReactive$$1(ob.value, key, val);
36 | 
37 |   // 通知相关watcher这个对象数据更新
38 |   ob.dep.notify();
39 |   return val
40 | }
41 | ```
42 | 
43 | 真正的核心代码是这一句：```defineReactive$$1(ob.value, key, val);```，这一句为对象添加了新的属性，并且使得值为响应式的。


--------------------------------------------------------------------------------
/reactivity/watch.md:
--------------------------------------------------------------------------------
 1 | $watch这个方法是开放给开发者用来生成watcher实例的入口，主要做的就是实例化了一个watcher。
 2 | 
 3 | ```javascript
 4 | Vue.prototype.$watch = function (expOrFn,cb,options) {
 5 | 	var vm = this;
 6 | 	options = options || {};
 7 | 	// 标记这个watcher是用户行为生成的，需要以后容错
 8 | 	options.user = true;
 9 | 	var watcher = new Watcher(vm, expOrFn, cb, options);
10 | 	// 立即触发回调
11 | 	if (options.immediate) {
12 |   		cb.call(vm, watcher.value);
13 | 	}
14 | 
15 | 	// 返回取消观察函数，这个函数内部调用了watcher原型链上的teardown方法
16 | 	return function unwatchFn () {
17 | 		watcher.teardown();
18 | 	}
19 | };
20 | ```


--------------------------------------------------------------------------------
/reactivity/watcher.md:
--------------------------------------------------------------------------------
  1 | 在Vue的各个相关类中，Watcher类起到了中心枢纽的功能，响应式数据的变化通过dep通知到watcher，watcher通过其原型上的各个方法和回调函数实现computed、watch、渲染视图等功能。
  2 | 
  3 | 
  4 | ```javascript
  5 | var uid$2 = 0;
  6 | 
  7 | var Watcher = function Watcher (vm,expOrFn,cb,options) {
  8 |   // 与vue实例互相关联
  9 |   this.vm = vm;
 10 |   vm._watchers.push(this);
 11 | 
 12 |   if (options) {
 13 |     // deep参数为了监听更深层级值的变化
 14 |     this.deep = !!options.deep;
 15 |     // user参数表明cb是用户传入的，需要注意容错
 16 |     this.user = !!options.user;
 17 |     // lazy用在computed实现上，dep通知数据更新后仅仅标识当前数据是脏数据
 18 |     this.lazy = !!options.lazy;
 19 |     // sync参数表示dep通知数据更新后是否同步更新
 20 |     this.sync = !!options.sync;
 21 |   } else {
 22 |     this.deep = this.user = this.lazy = this.sync = false;
 23 |   }
 24 |   // 数据更新后要执行的回调
 25 |   this.cb = cb;
 26 |   // 唯一id
 27 |   this.id = ++uid$2;
 28 |   // 表示这个watcher是否还有用
 29 |   this.active = true;
 30 | 
 31 |   // 标记lazy watcher初始数据为脏
 32 |   this.dirty = this.lazy; 
 33 | 
 34 |   // 和dep相关联需要的几个属性
 35 |   this.deps = [];
 36 |   this.newDeps = [];
 37 |   this.depIds = new _Set();
 38 |   this.newDepIds = new _Set();
 39 | 
 40 |   // 调试时用到
 41 |   this.expression = expOrFn.toString();
 42 | 
 43 | 
 44 |   // getter是值获取函数
 45 |   if (typeof expOrFn === 'function') {
 46 |     this.getter = expOrFn;
 47 |   } else {
 48 |     this.getter = parsePath(expOrFn);
 49 |     if (!this.getter) {
 50 |       this.getter = function () {};
 51 |       "development" !== 'production' && warn(
 52 |         "Failed watching path: \"" + expOrFn + "\" " +
 53 |         'Watcher only accepts simple dot-delimited paths. ' +
 54 |         'For full control, use a function instead.',
 55 |         vm
 56 |       );
 57 |     }
 58 |   }
 59 |   // watcher的值
 60 |   this.value = this.lazy? undefined : this.get();
 61 | };
 62 | 
 63 | Dep.target = null;
 64 | 
 65 | var targetStack = [];
 66 | function pushTarget (_target) {
 67 |   if (Dep.target) { targetStack.push(Dep.target); }
 68 |   Dep.target = _target;
 69 | }
 70 | function popTarget () {
 71 |   Dep.target = targetStack.pop();
 72 | }
 73 | 
 74 | // 实现依赖收集，获得计算值
 75 | Watcher.prototype.get = function get () {
 76 |   // 将该watcher挂在Dep.target上
 77 |   pushTarget(this);
 78 |   var value;
 79 |   var vm = this.vm;
 80 |   // 因为是用户传进来的getter，容错
 81 |   if (this.user) {
 82 |     try {
 83 |       value = this.getter.call(vm, vm);
 84 |     } catch (e) {
 85 |       handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
 86 |     }
 87 |   } else {
 88 |     value = this.getter.call(vm, vm);
 89 |   }
 90 | 
 91 |   // deep所做的就是递归，让更深的dep关联到watcher
 92 |   if (this.deep) {
 93 |     traverse(value);
 94 |   }
 95 |   popTarget();
 96 | 
 97 |   // 完成依赖的更新
 98 |   this.cleanupDeps();
 99 |   return value
100 | };
101 | 
102 | // 添加依赖
103 | Watcher.prototype.addDep = function addDep (dep) {
104 |   var id = dep.id;
105 |   if (!this.newDepIds.has(id)) {
106 |     this.newDepIds.add(id);
107 |     this.newDeps.push(dep);
108 |     if (!this.depIds.has(id)) {
109 |       dep.addSub(this);
110 |     }
111 |   }
112 | };
113 | 
114 | // 解除不再需要的dep和watcher的关系
115 | Watcher.prototype.cleanupDeps = function cleanupDeps () {
116 |     var this$1 = this;
117 | 
118 |   // 消除不再需要的dep到watcher的关系
119 |   var i = this.deps.length;
120 |   while (i--) {
121 |     var dep = this$1.deps[i];
122 |     if (!this$1.newDepIds.has(dep.id)) {
123 |       dep.removeSub(this$1);
124 |     }
125 |   }
126 | 
127 |   // 更新当前的依赖
128 |   var tmp = this.depIds;
129 |   this.depIds = this.newDepIds;
130 |   this.newDepIds = tmp;
131 |   this.newDepIds.clear();
132 |   tmp = this.deps;
133 |   this.deps = this.newDeps;
134 |   this.newDeps = tmp;
135 |   this.newDeps.length = 0;
136 | };
137 | 
138 | 
139 | // dep通知watcher时的入口函数
140 | Watcher.prototype.update = function update () {
141 |   // lazy watcher 仅仅表示数据是脏的，必要的时候通过evaluate获取数据
142 |   if (this.lazy) {
143 |     this.dirty = true;
144 |   } 
145 |   // 同步更新的watcher 同步调用回调
146 |   else if (this.sync) {
147 |     this.run();
148 |   } 
149 |   // 异步更新的watcher加入到更新队列
150 |   else {
151 |     queueWatcher(this);
152 |   }
153 | };
154 | 
155 | // 调用回调
156 | Watcher.prototype.run = function run () {
157 |   if (this.active) {
158 |     var value = this.get();
159 |     if (
160 |       value !== this.value || isObject(value) || this.deep) {
161 |       // 设定新值
162 |       var oldValue = this.value;
163 |       this.value = value;
164 |       // 执行回调，还要容错
165 |       if (this.user) {
166 |         try {
167 |           this.cb.call(this.vm, value, oldValue);
168 |         } catch (e) {
169 |           handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
170 |         }
171 |       } else {
172 |         this.cb.call(this.vm, value, oldValue);
173 |       }
174 |     }
175 |   }
176 | };
177 | 
178 | // 用于lazy watcher
179 | Watcher.prototype.evaluate = function evaluate () {
180 |   this.value = this.get();
181 |   this.dirty = false;
182 | };
183 | 
184 | // watcher 嵌套引用时候需要
185 | Watcher.prototype.depend = function depend () {
186 |     var this$1 = this;
187 | 
188 |   var i = this.deps.length;
189 |   while (i--) {
190 |     this$1.deps[i].depend();
191 |   }
192 | };
193 | 
194 | 
195 | // 解除和vue实例、dep实例的关系，标记为不再活动
196 | Watcher.prototype.teardown = function teardown () {
197 |   var this$1 = this;
198 | 
199 |   if (this.active) {
200 |     // 解除vm对watcher的关系
201 |     if (!this.vm._isBeingDestroyed) {
202 |       remove(this.vm._watchers, this);
203 |     }
204 |     // 解除dep对watcher的依赖
205 |     var i = this.deps.length;
206 |     while (i--) {
207 |       this$1.deps[i].removeSub(this$1);
208 |     }
209 |     this.active = false;
210 |   }
211 | };
212 | ```
213 | 
214 | Watcher原型链上的方法看起来比较多，我们可以先分下类：```get```、```addDep```、```cleanupDeps```这三个方法是用来与dep互相关联使用的，```get```和```evaluate```是用来获取watcher的值的,```update```是暴露出去的让dep通知的入口，```run```方法是执行watcher的回调的入口，最后一个```teardown```用来取消观察停止回调。
215 | 
216 | 到这里我们已经掌握了依赖收集机制必要的知识，现在我们理一遍流程：当watcher要收集依赖时，它会调用```get```方法，把watcher本身挂载到```Dep.target```上，然后watcher调用```getter```函数，我们去获取响应式的属性，这样就走到了属性的get方法(defineReactive方法的结果)，在属性的get方法中，dep调用```depend```方法，```depend```方法再调用watcher的```addDep```方法，这样watcher和dep就建立了联系，最后watcher调用```cleanupDeps```方法，把那些曾经关联到watchr但现在不再关联到watcher的dep的到watcher的关系取消掉。
217 | 
218 | 
219 | 之前一直没想明白为什么要用```targetStack```。考虑这么一个场景：computed属性A需要用到computed属性B，调用A对应watcher(watcherA)的get方法时，会先把A对应watcher先挂到```Dep.target```上，然后会调用watcherA的getter方法，在getterA的某个阶段会访问属性B，B的watcher也会调用对应的get方法，也需要收集依赖，这时我们需要暂存watcherA(入targetStack)，然后把watcherB挂到```Dep.target```上。这种嵌套依赖需要```targetStack```辅助。还有一个问题，watcherB依赖的Dep实例，watcherA是否也需要依赖？答案是肯定的，毕竟watcherB不能把自身变化通知给watcherA，负责这个的是watcher原型链上的```depend```方法。在computed的具体实现中我们会看到它是如何运用的。


--------------------------------------------------------------------------------
/virtualdom/README.md:
--------------------------------------------------------------------------------
1 | Vue采用virtual dom来渲染UI，这一章我将介绍Vue中的虚拟节点是如何实现的、以及虚拟节点是如何反映到真实节点的。


--------------------------------------------------------------------------------
/virtualdom/async_component.md:
--------------------------------------------------------------------------------
  1 | 一般定义组件的方式是使用一个对象，对于异步组件，使用一个工厂函数定义组件(区分是否是异步组件的依据)。
  2 | 
  3 | 异步组件的基本思路是异步加载组件，当加载完成后通知对应的vue实例更新状态，vue实例重新解析要渲染的组件。加载期间可以渲染一个加载组件，默认是什么都不渲染。
  4 | 
  5 | 下面的代码取自 *resolve-async-component.js* 文件
  6 | 
  7 | ```javascript
  8 | // factory 是工厂函数
  9 | // baseCtor 是Vue，用来将组件对象加工成子类
 10 | // context 是使用这个组件的vue实例
 11 | 
 12 | export function resolveAsyncComponent (
 13 |   factory: Function,
 14 |   baseCtor: Class<Component>,
 15 |   context: Component
 16 | ): Class<Component> | void {
 17 |   // error是加载失败的标志位
 18 |   // errorComp 是失败时使用的组件对应的vue子类
 19 |   if (isTrue(factory.error) && isDef(factory.errorComp)) {
 20 |     return factory.errorComp
 21 |   }
 22 | 
 23 |   // 如果加载成功，返回异步组件对应的子类
 24 |   if (isDef(factory.resolved)) {
 25 |     return factory.resolved
 26 |   }
 27 | 
 28 |   // 加载时展示的组件
 29 |   if (isTrue(factory.loading) && isDef(factory.loadingComp)) {
 30 |     return factory.loadingComp
 31 |   }
 32 | 
 33 |   // contexts 变量保存的是使用这个工厂函数的vue实例
 34 |   if (isDef(factory.contexts)) {
 35 |     // already pending
 36 |     factory.contexts.push(context)
 37 |   } else {
 38 |     const contexts = factory.contexts = [context]
 39 |     let sync = true
 40 | 
 41 |     // 加载成功或者失败都调用这个方法更新
 42 |     const forceRender = () => {
 43 |       for (let i = 0, l = contexts.length; i < l; i++) {
 44 |         // vue实例刷新
 45 |         contexts[i].$forceUpdate()
 46 |       }
 47 |     }
 48 | 
 49 |     // 加载成功
 50 |     const resolve = once((res: Object | Class<Component>) => {
 51 |       // 缓存异步组件对应的vue子类
 52 |       factory.resolved = ensureCtor(res, baseCtor)
 53 |       // 如果是同步的会在最后返回这个假装是异步的同步组件，不需要更新
 54 |       if (!sync) {
 55 |         forceRender()
 56 |       }
 57 |     })
 58 | 
 59 |     // 加载失败
 60 |     const reject = once(reason => {
 61 |       process.env.NODE_ENV !== 'production' && warn(
 62 |         `Failed to resolve async component: ${String(factory)}` +
 63 |         (reason ? `\nReason: ${reason}` : '')
 64 |       )
 65 |       if (isDef(factory.errorComp)) {
 66 |         // 标记为加载失败
 67 |         factory.error = true
 68 |         forceRender()
 69 |       }
 70 |     })
 71 | 
 72 |     const res = factory(resolve, reject)
 73 | 
 74 |     // 对不同语法的支持，默认是require语法，不做特殊处理
 75 | 
 76 |     if (isObject(res)) {
 77 | 
 78 |       if (typeof res.then === 'function') {
 79 |         // ()=>import 语法
 80 |         if (isUndef(factory.resolved)) {
 81 |           res.then(resolve, reject)
 82 |         }
 83 |       } else if (isDef(res.component) && typeof res.component.then === 'function') {
 84 |         // 处理加载状态语法
 85 | 
 86 |         res.component.then(resolve, reject)
 87 | 
 88 |         if (isDef(res.error)) {
 89 |           factory.errorComp = ensureCtor(res.error, baseCtor)
 90 |         }
 91 | 
 92 |         if (isDef(res.loading)) {
 93 |           factory.loadingComp = ensureCtor(res.loading, baseCtor)
 94 |           // 其实我没怎么理解这个delay是为什么场景设计的
 95 |           if (res.delay === 0) {
 96 |             factory.loading = true
 97 |           } else {
 98 |             setTimeout(() => {
 99 |               if (isUndef(factory.resolved) && isUndef(factory.error)) {
100 |                 factory.loading = true
101 |                 forceRender()
102 |               }
103 |             }, res.delay || 200)
104 |           }
105 |         }
106 | 
107 |         // 加载超时机制
108 |         if (isDef(res.timeout)) {
109 |           setTimeout(() => {
110 |             if (isUndef(factory.resolved)) {
111 |               reject(
112 |                 process.env.NODE_ENV !== 'production'
113 |                   ? `timeout (${res.timeout}ms)`
114 |                   : null
115 |               )
116 |             }
117 |           }, res.timeout)
118 |         }
119 |       }
120 |     }
121 | 
122 |     sync = false
123 |     // return in case resolved synchronously
124 |     return factory.loading
125 |       ? factory.loadingComp
126 |       : factory.resolved
127 |   }
128 | }
129 | 
130 | ```


--------------------------------------------------------------------------------
/virtualdom/create_element.md:
--------------------------------------------------------------------------------
 1 | Vue2中引入了virtual dom用来对DOM节点进行描述，我们首先要关注的是如何生层vdom。
 2 | 
 3 | 首先要解决的一个问题是，创建的vdom，描述的是那种节点。一个vdom可能是描述普通的DOM元素，也可能对应一个组件。
 4 | 
 5 | ```javascript
 6 | // 下面的tag对应createElement第一个参数，表示节点类型
 7 | 
 8 | 
 9 | // 处理抽象组件component 由is属性决定对应的节点
10 | if (isDef(data) && isDef(data.is)) {
11 |     tag = data.is
12 | }
13 | if (!tag) {
14 | // 处理tag是falsy值的情况，业务代码走到这基本就是bug了
15 |     return createEmptyVNode()
16 | }
17 | 
18 | // createElement第一个参数支持多种类型(字符串、对象、函数)
19 | if (typeof tag === 'string') {
20 |     let Ctor
21 |     ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
22 |     if (config.isReservedTag(tag)) {
23 |         // 普通DOM节点
24 |         vnode = new VNode(
25 |             config.parsePlatformTagName(tag), data, children,
26 |                 undefined, undefined, context
27 |         )
28 |     } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
29 |         // 组件
30 |         vnode = createComponent(Ctor, data, context, children, tag)
31 |     } else {
32 |         // 既不是普通DOM节点，也不是注册的组件，一般是bug了
33 |         vnode = new VNode(
34 |             tag, data, children,
35 |             undefined, undefined, context
36 |             )
37 |     }
38 | } else {
39 | // 一般只有手写render函数才有可能走到这里
40 | // tag应该是一个vue实例的配置项，或者是一个vue子类
41 | // https://github.com/alexjoverm/v-runtime-template 用到了这个特性
42 |     vnode = createComponent(tag, data, context, children)
43 | }
44 | ```
45 | 
46 | 我们注册组件的时候，可能注册的是vue选项，也可能是vue子类，还可能是异步加载函数，createComponent方法就负责对这些情况处理。
47 | 
48 | ```javascript
49 | if (isUndef(Ctor)) {
50 |     return
51 | }
52 | // 这个是根Vue类
53 | const baseCtor = context.$options._base
54 | 
55 | // 对象的情况，尝试处理成vue子类
56 | if (isObject(Ctor)) {
57 |     Ctor = baseCtor.extend(Ctor)
58 | }
59 | 
60 | // 到现在应该都处理成函数的形式了
61 | if (typeof Ctor !== 'function') {
62 |     if (process.env.NODE_ENV !== 'production') {
63 |         warn(`Invalid Component definition: ${String(Ctor)}`, context)
64 |     }
65 |     return
66 | }
67 | 
68 | // 异步组件 具体内容见下一篇 异步组件
69 | let asyncFactory
70 | // 因为所有的Vue子类都会有cid作为唯一标示
71 | // 没有cid意味着是异步组件
72 | if (isUndef(Ctor.cid)) {
73 |     asyncFactory = Ctor
74 |     Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
75 |     if (Ctor === undefined) {
76 |         // 暂时用个空节点占位，如果没有loading component的话
77 |         return createAsyncPlaceholder(
78 |             asyncFactory,
79 |             data,
80 |             context,
81 |             children,
82 |             tag
83 |         )
84 |     }
85 | }
86 | 
87 | // 生成对应的vnode
88 | const name = Ctor.options.name || tag
89 | const vnode = new VNode(
90 |     `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
91 |     data, undefined, undefined, undefined, context,
92 |     { Ctor, propsData, listeners, tag, children },
93 |     asyncFactory
94 | )
95 | ```
96 | 
97 | 到现在为止我们确定了vdom描述的是什么节点


--------------------------------------------------------------------------------
/virtualdom/patch.md:
--------------------------------------------------------------------------------
  1 | patch的意思是打补丁，包含一种在原有基础上修改的意思。但是Vue的patch包含了三层意思：创建、修改、删除。目前先走马观花看一下patch过程。
  2 | 
  3 | 这里有个基本概念**sameVnode**
  4 | 
  5 | 
  6 | ```javascript
  7 | function sameVnode (a, b) {
  8 | 	return (
  9 | 		a.key === b.key &&
 10 | 		a.tag === b.tag &&
 11 | 		a.isComment === b.isComment &&
 12 | 		isDef(a.data) === isDef(b.data) &&
 13 | 		sameInputType(a, b)
 14 | 	)
 15 | }
 16 | function sameInputType (a, b) {
 17 | 	if (a.tag !== 'input') { return true }
 18 | 	var i;
 19 | 	var typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type;
 20 | 	var typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type;
 21 | 	return typeA === typeB
 22 | }
 23 | ```
 24 | 
 25 | 虽然名字是sameVnode，但是判断标准相对较松，翻译成*值得比较节点*比较合适。它要求两个节点的tag一致、key一致、如果是input还要type一致，如果满足这些条件，就认为可以考虑在原有基础上修改。
 26 | 
 27 | 
 28 | ## 创建
 29 | 
 30 | 当旧vnode是真实DOM时，这意味着我们是处于生命周期的mount阶段。我们需要将新vnode映射为真实DOM，并且替换旧DOM。
 31 | 
 32 | ## 更新
 33 | 
 34 | 这对应生命周期的update阶段。当新旧vnode不值得比较时，会直接创建新的DOM替换掉旧DOM。
 35 | 
 36 | 
 37 | 
 38 | 当新旧两个节点值得比较时，会调用patchVnode更新DOM，这是patch的重点。
 39 | 
 40 | ```javascript
 41 | function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
 42 | 	if (oldVnode === vnode) {
 43 | 		return
 44 | 	}
 45 | 
 46 | 	// once这样能重复利用就重复利用
 47 | 	if (isTrue(vnode.isStatic) &&
 48 | 	    isTrue(oldVnode.isStatic) &&
 49 | 	    vnode.key === oldVnode.key &&
 50 | 	    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))) {
 51 | 			vnode.elm = oldVnode.elm;
 52 | 			vnode.componentInstance = oldVnode.componentInstance;
 53 | 			return
 54 | 	}
 55 | 	var i;
 56 | 	var data = vnode.data;
 57 | 	if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
 58 | 	  i(oldVnode, vnode);
 59 | 	}
 60 | 	var elm = vnode.elm = oldVnode.elm;
 61 | 	var oldCh = oldVnode.children;
 62 | 	var ch = vnode.children;
 63 | 
 64 | 	// update vnode相关属性
 65 | 	if (isDef(data) && isPatchable(vnode)) {
 66 | 	  for (i = 0; i < cbs.update.length; ++i) { cbs.update[i](oldVnode, vnode); }
 67 | 	  if (isDef(i = data.hook) && isDef(i = i.update)) { i(oldVnode, vnode); }
 68 | 	}
 69 | 
 70 | 	// 处理子节点
 71 | 	if (isUndef(vnode.text)) {
 72 | 	  // 新vnode和老vnode都有子节点，updateChildren处理	
 73 | 	  if (isDef(oldCh) && isDef(ch)) {
 74 | 	    if (oldCh !== ch) { updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly); }
 75 | 	  } else if (isDef(ch)) {
 76 | 	  	// 只有新vnode有子节点，添加对应节点即可
 77 | 	    if (isDef(oldVnode.text)) { nodeOps.setTextContent(elm, ''); }
 78 | 	    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
 79 | 	  } else if (isDef(oldCh)) {
 80 | 	  	// 只有旧vnode有子节点，干掉这些子节点
 81 | 	    removeVnodes(elm, oldCh, 0, oldCh.length - 1);
 82 | 	  } else if (isDef(oldVnode.text)) {
 83 | 	    nodeOps.setTextContent(elm, '');
 84 | 	  }
 85 | 	} else if (oldVnode.text !== vnode.text) {
 86 | 		// 更新文本节点
 87 | 	  nodeOps.setTextContent(elm, vnode.text);
 88 | 	}
 89 | 	if (isDef(data)) {
 90 | 	  if (isDef(i = data.hook) && isDef(i = i.postpatch)) { i(oldVnode, vnode); }
 91 | 	}
 92 | }
 93 | 
 94 | ```
 95 | 
 96 | patchVnode是从vnode更新视图的核心方法。首先处理了once这样的特殊情况，保证复用DOM元素，然后更新data属性，接着处理子节点。如果新vnode有子节点而旧vnode没有子节点，直接添加对应节点；如果没有新子节点只有旧子节点，干掉旧子节点即可；最为复杂的情况是新旧vnode均有子节点，那么需要调用updateChildren方法，关于这个方法，[请看aooy的博客](https://github.com/aooy/blog/issues/2)。
 97 | 
 98 | 
 99 | ## 销毁
100 | 
101 | 当没有新的vnode只有旧的vnode时，意味着我们要销毁旧vnode，这时候调用invokeDestroyHook销毁旧节点，这对应生命周期的destroy阶段。


--------------------------------------------------------------------------------
/virtualdom/vnode.md:
--------------------------------------------------------------------------------
  1 | 虚拟节点是用来模拟真实节点的，下面是Vue中虚拟节点的构造函数：
  2 | 
  3 | ```javascript
  4 | var VNode = function VNode (
  5 |   tag,
  6 |   data,
  7 |   children,
  8 |   text,
  9 |   elm,
 10 |   context,
 11 |   componentOptions
 12 | ) {
 13 |   this.tag = tag;
 14 |   this.data = data;
 15 |   this.children = children;
 16 |   this.text = text;
 17 |   this.elm = elm;
 18 |   this.ns = undefined;
 19 |   this.context = context;
 20 |   this.functionalContext = undefined;
 21 |   this.key = data && data.key;
 22 |   this.componentOptions = componentOptions;
 23 |   this.componentInstance = undefined;
 24 |   this.parent = undefined;
 25 |   this.raw = false;
 26 |   this.isStatic = false;
 27 |   this.isRootInsert = true;
 28 |   this.isComment = false;
 29 |   this.isCloned = false;
 30 |   this.isOnce = false;
 31 | };
 32 | ```
 33 | 
 34 | * tag 表明节点的标签类型
 35 | * data 包含相关attr、事件等
 36 | * children 存放的是子虚拟节点
 37 | * text 是文本节点专用的，表明文本内容
 38 | * ele 虚拟节点对应的真实DOM节点
 39 | * ns html的命名空间(用处不大)
 40 | * context
 41 | * functionalContext
 42 | * key 对一个节点的唯一标识
 43 | * componentOptions
 44 | * componentInstance
 45 | * parent
 46 | * raw
 47 | * isStatic 是否是静态的(更新时可以跳过diff步骤)
 48 | * isRootInsert
 49 | * isComment 是否是comment节点
 50 | * isCloned 是否是克隆的节点
 51 | * isOnce 是否是一次性节点(更新时可以跳过diff步骤)
 52 | 
 53 | 基于这个构造函数，作者封装了一些获取特殊类型vnode实例的方法：
 54 | 
 55 | ```javavscript
 56 | // 创建一个空的vnode实例
 57 | var createEmptyVNode = function () {
 58 | 	var node = new VNode();
 59 | 	node.text = '';
 60 | 	node.isComment = true;
 61 | 	return node
 62 | };
 63 | 
 64 | // 创建一个文本vnode
 65 | function createTextVNode (val) {
 66 |   return new VNode(undefined, undefined, undefined, String(val))
 67 | }
 68 | 
 69 | // 克隆一个vnode
 70 | function cloneVNode (vnode) {
 71 | 	var cloned = new VNode(
 72 | 		vnode.tag,
 73 | 		vnode.data,
 74 | 		vnode.children,
 75 | 		vnode.text,
 76 | 		vnode.elm,
 77 | 		vnode.context,
 78 | 		vnode.componentOptions
 79 | 	);
 80 | 	cloned.ns = vnode.ns;
 81 | 	cloned.isStatic = vnode.isStatic;
 82 | 	cloned.key = vnode.key;
 83 | 	cloned.isCloned = true;
 84 | 	return cloned
 85 | }
 86 | 
 87 | // 克隆多个vnode
 88 | function cloneVNodes (vnodes) {
 89 | 	var len = vnodes.length;
 90 | 	var res = new Array(len);
 91 | 	for (var i = 0; i < len; i++) {
 92 | 		res[i] = cloneVNode(vnodes[i]);
 93 | 	}
 94 | 	return res
 95 | }
 96 | 
 97 | // 根据一个DOM节点创建vnode
 98 | function emptyNodeAt (elm) {
 99 | 	return new VNode(nodeOps.tagName(elm).toLowerCase(), {}, [], undefined, elm)
100 | }
101 | ```
102 | 
103 | 


--------------------------------------------------------------------------------
/vuex.md:
--------------------------------------------------------------------------------
  1 | vuex是vue官方出品的用来实现共享状态管理的一个插件。我之前也仿照vuex的API[实现了一个低配版](https://github.com/jiangshanmeta/metax)。实现vuex其实并不是太难，我的实现就五百行左右吧，官方实现多点但是核心也不超过一千行。实现vuex作为一个加深对vue理解的练手项目还是不错的。
  2 | 
  3 | vuex中的state和getters对应vue实例中的data和computed，vuex的mutations/commit、actions/dispatch本质上是事件机制，vuex的subscribe和subscribeAction更接近于钩子机制。可以说只要熟悉vue，实现vuex的前提条件就满足了。
  4 | 
  5 | 我的实现和vuex最大的差异在于对module的理解。vuex的module更倾向于是提供一个业务代码组织方式，我的实现是把module当成一个独立单元(store实例)，这些store实例按照树状结构组织起来，并且相应的属性会按照命名空间被代理到根store实例上，最终暴露出来的是根store实例。vuex只会对应一个store实例，这一个store实例会对应一棵module实例树。在vuex中ModuleCollection负责连接store实例和module实例树，但是它更接近于一个工具类。
  6 | 
  7 | 由module引申出来的一个概念是localContext。在vuex的文档中经常会看到rootState、rootGetters这样的字眼，他们其实对应rootContext。localContext是限制在了一个module中。在我的实现中，每一个module都会对应一个store实例，localContext可以认为是每个module对应的store实例。在vuex中由于只有一个store实例，需要做一些操作获取localContext。
  8 | 
  9 | 
 10 | ```javascript
 11 | function makeLocalContext (store, namespace, path) {
 12 |   const noNamespace = namespace === ''
 13 | 
 14 |   const local = {
 15 |     // 对应dispatch方法第一个参数的dispatch
 16 |     dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
 17 |       const args = unifyObjectStyle(_type, _payload, _options)
 18 |       const { payload, options } = args
 19 |       let { type } = args
 20 | 
 21 |       if (!options || !options.root) {
 22 |         // 核心是根据命名空间获取相对于根的dispatch type参数
 23 |         type = namespace + type
 24 |         if (process.env.NODE_ENV !== 'production' && !store._actions[type]) {
 25 |           console.error(`[vuex] unknown local action type: ${args.type}, global type: ${type}`)
 26 |           return
 27 |         }
 28 |       }
 29 | 
 30 |       return store.dispatch(type, payload)
 31 |     },
 32 |     // 对应dispatch方法第一个参数的commit
 33 |     // 思路与dispatch一致
 34 |     commit: noNamespace ? store.commit : (_type, _payload, _options) => {
 35 |       const args = unifyObjectStyle(_type, _payload, _options)
 36 |       const { payload, options } = args
 37 |       let { type } = args
 38 | 
 39 |       if (!options || !options.root) {
 40 |         type = namespace + type
 41 |         if (process.env.NODE_ENV !== 'production' && !store._mutations[type]) {
 42 |           console.error(`[vuex] unknown local mutation type: ${args.type}, global type: ${type}`)
 43 |           return
 44 |         }
 45 |       }
 46 | 
 47 |       store.commit(type, payload, options)
 48 |     }
 49 |   }
 50 | 
 51 |   // getters and state object must be gotten lazily
 52 |   // because they will be changed by vm update
 53 |   Object.defineProperties(local, {
 54 |     getters: {
 55 |       get: noNamespace
 56 |         ? () => store.getters
 57 |         : () => makeLocalGetters(store, namespace)
 58 |     },
 59 |     state: {
 60 |       get: () => getNestedState(store.state, path)
 61 |     }
 62 |   })
 63 | 
 64 |   return local
 65 | }
 66 | 
 67 | // 从store的getters中截取localContext需要的getter
 68 | function makeLocalGetters (store, namespace) {
 69 |   const gettersProxy = {}
 70 | 
 71 |   const splitPos = namespace.length
 72 |   Object.keys(store.getters).forEach(type => {
 73 |     // skip if the target getter is not match this namespace
 74 |     // 截取的依据是命名空间
 75 |     // 获取该module以及所有子module的getters
 76 |     if (type.slice(0, splitPos) !== namespace) return
 77 | 
 78 |     // extract local getter type
 79 |     const localType = type.slice(splitPos)
 80 | 
 81 |     // Add a port to the getters proxy.
 82 |     // Define as getter property because
 83 |     // we do not want to evaluate the getters in this time.
 84 |     Object.defineProperty(gettersProxy, localType, {
 85 |       get: () => store.getters[type],
 86 |       enumerable: true
 87 |     })
 88 |   })
 89 | 
 90 |   return gettersProxy
 91 | }
 92 | 
 93 | // 根据路径截取state
 94 | function getNestedState (state, path) {
 95 |   return path.length
 96 |     ? path.reduce((state, key) => state[key], state)
 97 |     : state
 98 | }
 99 | ```
100 | 
101 | 我个人认为比较难理解的是localGetters的实现。所有的getters都以hash的形式注册到了全局的getters上，要分辨属于哪个module只能通过module的命名空间和挂在全局getters上的键名来对比。在我的实现中获取localGetters比较容易，但是没考虑子module的getters。
102 | 
103 | 关于module的还有注册各个属性，都比较好理解，唯一要说的是注册state：
104 | 
105 | ```javascript
106 | Vue.set(parentState, moduleName, module.state)
107 | ```
108 | 
109 | 之所以用了Vue.set而不是简单地设置parentState，是因为考虑到parentState如果是响应式的，子module的state可以自动变成响应式的(registerModule的时候会有这种情况)。在registerModule的时候，我们会发现会重新生成一个vue实例，它的作用仅仅是更新getters，原来的state并不受这个新vue实例的影响(进一步说，旧有的依赖也不会因为这个新vue实例而受影响)。


--------------------------------------------------------------------------------