系列文章：
陆续更新中...
预计八月中旬更新完毕。
1 前言
作为一名前端开发人员，日常开发使用Vue.js，对于各种Api使用都是只知其然而不知其所以然，不想日复一日的从入门到入门，我们已经都这个岁数了，是时候做出一些改变了！
于是我决定从即日起从GitHub上clone下来一份Vue.js源码来深入研究，本系列将一直更新至博文对Vue源码的整个学习过程，以及自己在过程中的一些理解。一方面开阔自己的知识视野，另一方面也希望这些文字能够带给大家些许帮助。
2. 学习规划
2.1 源码学习目录
本项目所剖析的「Vue.js」源码版本是目前最新的版本，版本号为「v2.9.6」，其代码目录如下：
├─ .circleci | 持续集成/持续部署的服务,根据配置，提供运行环境，执行测试、构建和部署。
│
├─ .github | 存放关于github上的一些配置
│
├─ .benchmarks | 验证性能、获得一些基准数据，可以与本软件的其他版本或同类软件进行比较
│
├─ dist | 项目构建后的文件
│
├─ examples | 示例文件
│
├─ flow | facebook 出品的 JavaScript 静态类型检查工具
│
├─ packages | 包含服务端渲染和模板编译器两种不同的NPM包，是提供给不同使用场景使用的
│
├─ scripts | 存放npm脚本配置文件，结合webpack、rollup进行编译、测试、构建等操作（使用者不需要关心）
│
│ ├─ alias.js | 模块导入所有源代码和测试中使用的别名
│ │
│ ├─ config.js | 包含在'dist'中找到的所有文件的生成配置
│ │
│ └─ build.js | 对 config.js 中所有的rollup配置进行构建
│
├─src | 项目源代码
│
│ ├─ compiler | 解析模版相关
│ │ ├─ codegen | 把AST转换为Render函数
│ │ │
│ │ ├─ directives | 通用生成Render函数之前需要处理的指令
│ │ └─ parser | 解析模版成AST
│ ├─core | 通用的、与运行平台无关的运行时代码
│ │
│ │ ├─components | 内置组件的代码
│ │ │
│ │ ├─global-api | Vue全局API，如Vue.use,Vue.extend,Vue.mixin等
│ │ │
│ │ ├─instance | 实例化相关内容，生命周期、事件等
│ │ │
│ │ ├─observer | 响应式核心目录，双向数据绑定相关文件
│ │ │
│ │ ├─util | 工具方法
│ │ │
│ │ └─vdom | 包含虚拟DOM 创建（creation）和打补丁(patching) 的代码
│ │
│ ├─platforms | 特定运行平台的代码，如weex
│ │
│ │ ├─web | web端
│ │ │ ├─ compiler | web端编译相关代码，用来编译模版成render函数basic.js
│ │ │ │
│ │ │ ├─ runtime | web端运行时相关代码，用于创建Vue实例等
│ │ │ │
│ │ │ ├─ server | 服务端渲染
│ │ │ │
│ │ │ └─ util | 相关工具类
│ │ │
│ │ └─weex | 基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用
│ │
│ ├─server | 与服务端渲染相关的代码
│ │
│ ├─sfc | 单文件组件的解析代码
│ │
│ └─shared | 项目公用的工具代码
│
├─ test | 项目测试代码
│
├─ types | Vue新版本支持TypeScript，主要是TypeScript类型声明文件
│
├─ .babelrc.js | babel配置
│
├─ .editorconfig | 文本编码样式配置文件
│
├─ .eslintignore | eslint校验忽略文件
│
├─ .eslintrc.js | eslint配置文件
│
├─ .flowconfig | flow配置文件
│
├─ .gitignore | Git提交忽略文件配置
│
├─ BACKERS.md | 赞助者信息文件
│
├─ LICENSE | 项目开源协议
│
├─ README.md | 说明文件
│
├─ package.json | 依赖
│
└─ yarn.lock | yarn版本锁定文件
「从上面的目录结构可以看出，Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平台运行的相关代码。」
由于我们只是学习Vue.js的设计思想以及代码实现的相关逻辑，所以我们暂不去关心类型检测、单元测试以及特定平台运行等相关逻辑实现，仅关注它的核心代码，即src/core和src/complier这两个目录下的代码，并且接下来后续的学习也都是只在这两个目录的范围之内。
2.2 学习路线
在学习之前，我们需要先制定一个学习路线，循序渐进的学习，这样不至于一头雾水，无处下手。后面的学习路线如下：
「变化侦测篇」
---- 学习Vue中如何实现数据的响应式系统，从而达到数据驱动视图;
「虚拟DOM篇」
---- 学习什么是虚拟DOM，以及Vue中的DOM-Diff原理;
「模板编译篇」
---- 学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM;
「实例方法篇」
---- 学习Vue中所有实例方法(即所有以$开头的方法)的实现原理;
「全局API篇」
---- 学习Vue中所有全局API的实现原理;
「生命周期篇」
---- 学习Vue中组件的生命周期实现原理;
「指令篇」
---- 学习Vue中所有指令的实现原理;
「过滤器篇」
---- 学习Vue中所有过滤器的实现原理;
「内置组件篇」
---- 学习Vue中内置组件的实现原理;
2.3 学习输出
通过一步步的学习，博主打算在学习过程中输出以下三个东西：
以博客记录源码分析的过程； clone下来的Vue源码添加尽可能详细的注释，详细的解读； 做一份思维导图，以宏观角度总览源码；
文章参考资料：
难凉热血的剖析Vue源码 不知什么原因该大佬的gitHub资源消失了，大家也可以关注这位大佬的其他git项目，受益匪浅； VNode虚拟DOM学习 - violet-jack 文章关于源码的一些使用解读，参考了这位大佬的文章；
关于本系列文章，其实更多的是参考的各大佬的博客、gitHub，加上自己的总结，希望与大家共同进步！
系列文章：
陆续更新中...
预计八月中旬更新完毕。
我曾踏足山巅，也曾跌入低谷，这两者都让我受益良多。个人网站：https://zhaohongcheng.com