1. 写在前面

本书的目的是用来记录学习阅读Vue过程中的疑问和收获。Aaron所在的公司技术栈就是Vue，无论是管理端、移动端还是小程序和桌面端几乎所有大大小小的项目都是使用Vue的生态，但是Aaron在写业务的过程中对Vue的掌握一直停留在熟悉API的层面，在遇到疑惑的时候也只是通过搜索和社区去解决部分场景化的问题，对一些概念性、原理性的知识点一直是模糊的，也没有系统地去学习和梳理。所以在Aaron的计划中就有了这本书。

1.1. 怎么看

Aaron第一次看这种级别的框架，看不懂是理所当然的（先认怂，哈哈哈），所以在参阅了这篇文章👉来聊聊源码学习之后，Aaron找到了三个指导思想：全盘了解、主线优先、问题驱动。

1.1.1. 全盘了解

首先你要对这个开源项目要有全盘的了解，知道它产生的背景，来解决什么样的问题。开始看源码前，先对它的源码目录结构、代码执行入口、构建打包方式、最终产出的文件等等有一个整体的了解。需要用一个全局的视野去审视源码，切忌漫无目的的看源码

1.1.2. 主线优先

当我们通过问题驱动去看代码的时候，要牢记主线优先，所谓主线就是解决你这个问题核心流程中的代码。因为通常一个开源项目它的功能会很丰富，所以代码分支逻辑会有很多。而当我们带着问题去看源码的时候，切忌像代码执行一样把每个分支逻辑都去看一遍，我们要关心的就是主线部分。分支逻辑通常都是为了解决某些特定场景的问题，那么如果想学习它的话就针对这个场景分析的时候再回来看即可。还是以 Vue.js 为例，比如我们在分析模板是如何驱动 DOM 渲染的，我们只要关心核心流程 init -> mount -> render -> update -> patch 这个过程的实现即可。那么过程中遇到的初始化响应式对象这些分支逻辑，我们就可以先不看，因为当前分析的这个场景并不会有数据更新的部分，而这部分内容我们可以放到深入研究响应式原理的时候再

1.1.3. 问题驱动

在全盘了解的基础上，就可以通过问题驱动去看源码了。以 Vue.js 为例，我们知道了它的核心思想是数据驱动 + 组件化，那么我们就可以问自己，Vue 模板的数据是如何渲染到 DOM 上的，数据更新后模板是如何重新渲染的，组件化是如何实现的，模板到 render 函数如何编译的等等。那么每一个问题都可以值得我们针对性地去学习源码。问题驱动的方式和坑驱动不同的地方在于这个学习过程是主动的，自驱的，学到的东西会更加系统和全面；而坑驱动往往都会满足于解决某个问题就停下了，学习会比较局限

1.1.4. 阅读技巧

阅读源码也是有很多技巧的，比如关键地方加断点单步调试、复杂函数看单元测试的输入输出、复杂逻辑通过画图辅助以及跟随作者的commit历史记录、查看编译后的代码等

所以Aaron会先从翻社区的文章开始，比如响应式原理，我会先找几篇写得好的文章，总结梳理一下，在脑海里对响应式原理有个大概的轮廓之后再去查看对应的源码，在Aaron的想象中它的每一个章节应该会像一篇篇博客文章一样，先说明概念，然后再查看Vue的具体实现，然后加上Aaron自己的见解（如果有，哈哈哈）。所以在章节上面，Aaron也是会根据自己的情况有先后有顺序地去学习，比如我现在想先搞清$nextTick那我就先去看$nextTick的内容。

目前Vue的稳定版本是2.6.10，因此Aaron就基于这个版本开始学习。

1.2. TODO

• 全局看Vue
• 响应式原理
• 依赖收集
• 数据绑定
• VNode节点
• Virtual DOM与diff
• template编译
• 异步更新DOM策略及nextTick
• keep-alive组件使用及其使用原理