近期我们把微信公众平台管理端的前端框架切成 MVVM 架构，框架层面最终我们选择了 Vue，为了更了解 Vue，阅读Vue源码是必要的。
我参考的 Vue 版本是 2.2.0，整个项目的代码1万2千行，如果不搞清楚原理，直接每一行看下来肯定会漏掉不少细节，或者对作者为什么这样写代码感到莫名其妙。
如此庞大的项目要啃下来并非易事，里边涉及到非常多的概念：Virtual Dom; 条件/列表渲染; 自定义组件; 双向绑定; 指令等等。
按照经验，编写这么庞大的系统，我们总是从第1行代码开始写起，慢慢写到第1万行，逐步构造出整个系统/框架。
所以我也会按照这个思路，从零开始构造出一个完整的Vue框架。
从 how-to-learn-vue2项目 下载各个分支代码
使用 webpack 进行打包，源码采用ES6风格编写。
构建: npm install; webpack
统计当前分支源码行数: npm run line
运行 Demo: 直接使用 Chrome 打开 examples 目录里边的实例代码即可
建议按照下边顺序阅读，同时参考 官方的教程 配合理解。
我会把每个章节的 源码行数 以及 对应的分支 标记出来，方便大家可以看到每次源码变更的行数。
-
第一章 基础概念
-
1.1 Virtual DOM (源码总共 231 行，查看代码)
整个Vue的底层渲染机制是依赖VD的实现，因此先写一个极简的VD算法是非常不错的开头。
-
1.2 HTML parser (源码总共 639 行，查看代码，查看新增代码)
每次手工构造一个 VNode 树效率非常低，而且可读性差，因此这一节会构造一个解释器，能把 HTML 字符串转化成 VNode树。
还可以阅读一下番外篇: 1.2.1 一个兼容性更佳的HTML parser
-
1.3 构建一个最简单的数据绑定的 Vue (源码总共 945 行，查看代码，查看新增代码)
前边2节的代码已经让我们有足够的基础可以构造一个简单的 Vue 类，在这一篇文章会介绍如何在 Vue 模板语法新增语法糖的流程。
-
-
第二章 Vue雏形
-
2.1 VNode 的属性 attrs 和 props (源码总共 1112 行，查看代码，查看新增代码)
在前边我们忽略了 Dom 元素的属性，我们这一节就把这个补齐，同时从这一节开始我们来逐步完善一个 Vue 的 todo 案例。
-
2.2 控制语句
-
2.2.1 条件渲染 v-if, v-else-if, v-else (源码总共 1237 行，查看代码，查看新增代码)
往往我们需要通过控制某个状态显示或者隐藏界面的某部分，这里就需要用到 if else 的控制语句。
-
2.2.2 列表渲染 v-for (源码总共 1371 行，查看代码，查看新增代码)
这一节我们更新了 todo 的案例，支持 v-for 语法，可以传递一个数组进行列表渲染。
想了解如何改善 VNode 的 patch 算法减少列表 DOM 大规模重绘，还可以阅读番外篇: 2.2.2.1 列表渲染 v-for 的 key。
-
-
2.3 数据绑定
-
2.3.1 响应式原理 (源码总共 1547 行，查看代码，查看新增代码)
在之前的例子中，我们总是通过 vm.setData( { a:1, b:2 /* 需要填写整个完整的 data */} ) 来改变数据，从而引起界面的响应式变化。为了提高开发效率和可读性，我们更希望使用 vm.a = 3 来修改值，从而更新视图。
-
2.3.2 深度追踪依赖变化 (源码总共 2245 行，查看代码，查看新增代码)
在 2.3.1 节中，只要任何数据变化都一定会引起 VNode 树的更新计算，显然不是最高效的，因为界面不一定绑定了所有 vm 的所有属性，那些没被绑定的属性的更新不应该引起整个 vm 的 VNode 树计算，所以我们要追踪整个 VNode 树依赖的变化。
-
-
2.4 事件处理器
-
2.4.1 事件处理 (源码总共 2391 行，查看代码，查看新增代码)
前边一直在介绍如何渲染界面，当你需要和界面做交互的时候，就需要涉及到 Dom 的事件处理，所以在这一节，我们也要往之前的模型里边加上监听事件的语法。
-
2.4.2 完善事件语法以及事件修饰符 (源码总共 2563 行，查看代码，查看新增代码)
2.4.1节设计的 v-on 语法仅接受方法名:
v-on:dblclick="editTodo"，由于语法过于局限，所以没法在触发 editTodo 事件的时候知道当前元素映射的数据，更好的语法应该是v-on:dblclick="editTodo(todo)"，此外这一节也新增点语法糖: Vue 的事件修饰符。
-
-
2.5 完成todo案例 (源码总共 2875 行，查看代码，查看新增代码)
基本的 Vue 雏形就完成了，我们把一些代码重新组织了一下，新增了一点点语法糖(绑定-HTML-Class)，完善了整个 todo 的案例(查看代码)。到这一节结束，Vue 的工作原理已经剖析清楚了。
-
-
第三章 Vue进阶
-
3.1 生命周期 (源码总共 2972 行，查看代码，查看新增代码)
这一节的代码比较简单，基于 2.5 分支的基础上做了点代码位置调整，同时按照 Vue 的生命周期 加入了生命周期的回调。
-
3.2 自定义组件
-
3.2.1 Vue.extend (源码总共 3200 行，查看代码，查看新增代码)
-
3.2.2 简单的自定义组件 (源码总共 3434 行，查看代码，查看新增代码)
-
3.2.3 组件的 prop (源码总共 3831 行，查看代码，查看新增代码)
-
3.2.4 组件的事件与原生事件 (源码总共 4394 行，查看代码，查看新增代码)
-
3.2.5 slot (源码总共 4516 行，查看代码，查看新增代码)
-
3.2.6 $refs (源码总共 4633 行，查看代码，查看新增代码)
-
-
3.3 nextTick
-
3.4 指令
-
3.4.1 自定义指令，内置 v-show 指令
-
3.4.2 内置 v-text v-html 指令
-
-
3.5 双向绑定 v-model 指令
-
博客：http://rapheal.sinaapp.com/
微博：@raphealguo