前言
使用 vue 有段时间了，对 vue 的认识还停留在使用上，即使代码写的很 6 ，也只过是个 API 工程师，这样可是不行的呀。 遂心生看源码的念头，一是可以学习大神们的代码、编程技巧，二来也可以看看 vue 的实现原理。有点滴收获也是好的。
一些准备
我看的版本是 2.6.10，是目前 (19.11) 线上的最新的版本了。 首先我们先看下 vue 源码核心的代码结构。
src
├── compiler # 编译相关
├── core # 核心代码
├── platforms # 不同平台的支持
├── server # 服务端渲染
├── sfc # .vue 文件解析
├── shared # 共享代码
- compiler：主要是将 template 编译成 render 函数。包括将 template 编译成 ast 语法树、ast语法树的优化、生成 render 函数。
- core：vue 的核心代码，包括全局 API 的封装、vue 的实例化、虚拟 DOM 等。
- platforms：可以跨平台，可以配合 weex，让代码运行在 native 端。
- server：服务端渲染相关。
- sfc：把 .vue 类型的文件，解析成 js 对象。
- shared：客户端和服务端公用的一些方法。
初始化
vue 在构建时，运行的是 npm run build 指令，实际上执行的是node scripts/build.js。
"build": "node scripts/build.js",
在scripts/build.js文件中：
// 读取配置文件
let builds = require("./config").getAllBuilds()
而在配置文件scripts/config.js中，主要是像下面这样的配置，有很多。
'web-runtime-cjs-dev': {
entry: resolve('web/entry-runtime.js'), // 构建文件的入口
dest: resolve('dist/vue.runtime.common.dev.js'), // 构建文件的出口
format: 'cjs', // 构建出来的文件的规范
env: 'development', // 运行环境
banner
},
以web-full-cjs-prod这个配置为例，它的构建初始化过程如下图所示。
接下来，我们带着问题去分析下具体的源码。
比如说 Vue 是如何将模板渲染成虚拟 DOM 的？
由于我们主要是弄明白 Vue 的实现原理，所以该系列的代码是精简后的，如果想看全部的代码的话，可以从 GitHub 上拉取。
