TOC
前言
最近一直在看 Vue.js 源码，大约花了半个多月的时间阅读，有非常多的感悟，所以在这里希望能和大家分享一下我的成果。
首先我认为 Vue.js 这种牛逼框架的源码绝对值得一读，无论是你想知道底层实现，还是想偷学编程技巧，我相信都有会很多的收获，但是其实 Vue.js 的源码阅读起来并不是没有成本的，尽管已经做了很多可读性上的优化，不过阅读早期依旧会比较懵逼，所以来讨论一下整个项目的结构，以及推荐的阅读顺序。
目录结构
src
├── compiler // 模板编译器 也就是从模板字符串到render函数的转换
├── core // Vue的核心
│ ├── components // 内建缓存组件
│ │ ├── index.js
│ │ └── keep-alive.js
│ ├── config.js
│ ├── global-api // 对Vue.js扩展一些全局API 方便进行插件化的增强
│ │ ├── assets.js // 全局component filter 指令注册
│ │ ├── extend.js // Vue.extend
│ │ ├── index.js // 注册全局API的入口
│ │ ├── mixin.js // Vue.mixin
│ │ └── use.js // use会调用install方法 可以进行自动化的注册 一般第三方组件都会用这个来进行注册 实际上调用的还是assets里面的方法
│ ├── index.js // 一个完整Vue构造函数的最终出口
│ ├── instance // Vue实例的各个组成部分
│ │ ├── events.js // 用来绑定实例的父子组件事件监听
│ │ ├── index.js // 入口
│ │ ├── init.js // 创建的时候初始化这里的所有东西
│ │ ├── inject.js // provide/inject 官方推荐组件库使用 使用起来可能会造成一些阅读上的额外开销
│ │ ├── lifecycle.js // 生命周期 管理一个组件的创建 更新 等等
│ │ ├── proxy.js // 在render函数中将通过proxy获取实例的属性 方便进行报错
│ │ ├── render-helpers // render函数中调用的函数 可以将模板转换出的函数调用转换成vnode
│ │ │ ├── bind-object-listeners.js
│ │ │ ├── bind-object-props.js
│ │ │ ├── check-keycodes.js
│ │ │ ├── index.js
│ │ │ ├── render-list.js
│ │ │ ├── render-slot.js
│ │ │ ├── render-static.js
│ │ │ ├── resolve-filter.js
│ │ │ └── resolve-slots.js
│ │ ├── render.js // 为组件构建_render方法 他的作用是再次调用$vm.options.render方法生成Vnode并返回
│ │ └── state.js // 管理各种数据 增加数据监听 依赖收集等
│ ├── observer // Vue数据监听的核心
│ │ ├── array.js // 对数组进行监听 原理是重写数组的原型 监听数组的所有会导致content变动的方法
│ │ ├── dep.js // 依赖收集 为每一个监听单元（一个属性）建立一个dep对象 并重写getter setter方法
│ │ ├── index.js // 入口
│ │ ├── scheduler.js // watcher run 调度器 避免疯狂刷新
│ │ ├── traverse.js // 深度watcher功能 如果需要 会自动遍历一个对象的所有内部属性 从而让dep收集完整的依赖
│ │ └── watcher.js // 依赖收集与更改响应的核心 通过dep来收集依赖到某个关联watcher 随后set时 触发这个管理watcher 后面会详细的讲 超级牛逼
│ ├── util // 一些工具 这个就略过了
│ │ ├── debug.js
│ │ ├── env.js
│ │ ├── error.js
│ │ ├── index.js
│ │ ├── lang.js
│ │ ├── next-tick.js
│ │ ├── options.js
│ │ ├── perf.js
│ │ └── props.js
│ └── vdom
│ ├── create-component.js // render函数创建组件的方法 to Vnode
│ ├── create-element.js // render函数创建普通元素 to Vnode
│ ├── create-functional-component.js // 函数式组件（其实就类似于react的函数组件 单渲染组件 自己没啥状态的） to Vnode
│ ├── helpers
│ │ ├── extract-props.js // 将父组件的PropsData属性 加载到自己的_props里
│ │ ├── get-first-component-child.js // 一个小工具 从子元素从找到第一个组件
│ │ ├── index.js // 入口
│ │ ├── is-async-placeholder.js // 工具
│ │ ├── merge-hook.js // 可以把合并Vnode的HOOK 高阶函数的玩法 有点像 FP里的 compose
│ │ ├── normalize-children.js // 规范化children 有些情况下会比较特殊 必须重新格式化称vnode数组
│ │ ├── resolve-async-component.js // 异步组件
│ │ └── update-listeners.js // 更新一个组件的监听器 会顺便绑定到_event属性上
│ ├── modules
│ │ ├── directives.js // 指令
│ │ ├── index.js
│ │ └── ref.js // ref
│ ├── patch.js // 从Vnode 到真正的DOM 就是这个Path在进行操作 递归实例化都在这里
│ └── vnode.js
├── platforms
│ ├── web
│ │ ├── entry-compiler.js
│ │ ├── entry-runtime-with-compiler.js
│ │ ├── entry-runtime.js // 一般来说 阅读从这里开始比较好（从web端的角度上说）
│ │ ├── entry-server-basic-renderer.js
│ │ ├── entry-server-renderer.js
│ │ ├── runtime
│ │ │ ├── class-util.js
│ │ │ ├── components
│ │ │ │ ├── index.js
│ │ │ │ ├── transition-group.js
│ │ │ │ └── transition.js
│ │ │ ├── directives
│ │ │ │ ├── index.js
│ │ │ │ ├── model.js
│ │ │ │ └── show.js
│ │ │ ├── index.js
│ │ │ ├── modules
│ │ │ │ ├── attrs.js
│ │ │ │ ├── class.js
│ │ │ │ ├── dom-props.js
│ │ │ │ ├── events.js
│ │ │ │ ├── index.js
│ │ │ │ ├── style.js
│ │ │ │ └── transition.js
│ │ │ ├── node-ops.js // 把DOM操作独立出来 方便移植到各个平台上
阅读前的准备
flow - Flow 是 facebook 出的 JS 静态检查工具，这东西 Vue 的作者已经隐晦的说很垃圾了，目前 3.0 正在用 TS 进行重构，所以当成普通 JS 看也没事，无非就是一些类型标注
建立一个 vue 项目，边看边输出，边测试，边打断点，爽感加倍
要有耐心，慢慢看，进度慢难理解很正常
注释非常重要 一定要仔细看
别人的理解永远是配菜，自己的理解才是主菜
善用搜索功能 JS 的点击跳转到定义的功能真的不好用 有些时候就得手动搜索
推荐的阅读顺序
也就是推荐一下，大家实际阅读的时候应该是反复跳跃性的，根本没办法真的强调顺序进行阅读。
一 Web 端的入口
/src/platforms/web/entry-runtime.js 是打包时的最终出口，推荐作为入口点. Vue.js 用了核心与底层 DOM 操作 分离的方法进行开发，这意味着能够方便的移植到多平台。
简单来说 一个 Vue 其实可以被认为是 Vue 核心+底层 DOM 操作的组合
Vue 实例
通过路线，你应该可以摸到 /src/core/instance/index.js ,在这里是一个 Vue 构造函数的组装，可以清晰的看到各个组成部分，你可以顺着这个路线看看 Vue 的实例上都拥有那些功能，他们的用途是什么。
这里的重点我认为有如下几点
- render 方法 render 就是获取 VNode,然后交给组件的 update
- 组件的 options 上下文
- 数据的依赖收集过程
递归挂载
接下来你可以对 Vue 的挂载过程进行阅读 /src/core/vdom,理解递归渲染，子组件不断实例化的过程，以及当 DOM 更新到时候，vue 是如何进行 diff 的。
平台相关组件
阅读如 keep-alive ，transition 的一些组件的原理
非常牛逼的东西
这些东西我认为是 Vue.js 相比其他 MVVM 框架不同的地方，实现都非常的巧妙.
- 依赖收集机制，按需收集，watcher 堆栈模式，数组的监听
- diff 算法 双端对比算法 可能是最简单最容易理解的 diff 算法 大部分情况下也很高效
- nextTick 的实现
- patch 的过程 diff 与更新同时进行
其实我本来写了一些东西，关于 Vue 依赖收集的实现，写了一半发现实在太难写了，还不如直接看源码来的实惠，所以放弃了。大家还是靠自己看来的最好！