手牵手，从零学习Vue源码 系列一（前言-目录篇)

系列文章：

• 手牵手，从零学习Vue源码 系列一（前言-目录篇)

• 手牵手，从零学习Vue源码 系列二（变化侦测篇）

• 手牵手，从零学习Vue源码 系列三（虚拟DOM篇）

陆续更新中...

预计八月中旬更新完毕。

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，加上自己的总结，希望与大家共同进步！

系列文章：

• 手牵手，从零学习Vue源码 系列一（前言-目录篇)

• 手牵手，从零学习Vue源码 系列二（变化侦测篇）

陆续更新中...

预计八月中旬更新完毕。

我曾踏足山巅，也曾跌入低谷，这两者都让我受益良多。个人网站：https://zhaohongcheng.com