vue 源码阅读一点经验

序言

我一直在看些解析 vue 源码的文章，也跟着动手实现过极简 MVVM 框架，但始终不敢碰 github 上 vue 的代码仓库，因为我觉得框架经过几年的发展早就不是一般水平的人能看得懂，或者每一行代码你都看得懂，但串起来就不知所云了（只见树木，不见森林）。你需要一个能带你找到“未知世界”的入口、有耐心、分得清主次的指路人。

接下来不是要打广告、卖点知识付费的产品，我只是向你推荐一个 github 上的 vue 源码解读项目，再补充些我个人在学习 vue 源码时的一点经验。

正文

这个vue 源码解读项目真如它描述里所说，是“逐行级别的”源码分析，更难得的是，作者会适时补充相关代码具体的应用例子，让你知道为什么的同时，还知道怎么用。推荐把 vue 源码下载到本地，然后对照着看，如果在看的同时能帮忙修改一下上面的错别字就更好了。

接下来是我个人在阅读 vue 源码时的几点经验。

经验一： 你需要一个好的编辑器

在阅读源码时，你得潜进某个入口文件里，然后非常频繁地在它的引用文件之间跳转。如果你的编辑器识别 ES6 模块加载语法，支持文件间点击跳转，支持通过快捷键前进/后退，会为你节省大量的时间。推荐使用支持以上功能的 vscode ， vscode 的好处不仅于此，后续还会提及。

经验二：借助测试用例、动手调试

如果交给你一份陌生的代码，要求你在最短时间内搞懂它，你会用什么办法呢？你可以先运行代码，在代码启动入口打个断点，然后单步调试，直到结束。

这是最笨的方法，因为在程序结束前，可能你得单步执行好几百次代码，每次你都陷入到某个意义不明的函数中，你不知道这事什么时候会完，你耐心耗尽，你最终一无所获。

比较聪明省事的方法就是借助测试用例。如今一个维护得当的代码仓库，会把代码功能分块，每一块还会带上相应的测试用例。你可以轻易找到感兴趣的模块，然后运行里面的测试用例。再想办法在运行测试用例时打上断点单步调试。这里的想办法是指：一，因为测试用例通常是批量跑的，你得更改配置运行某单个测试用例；二，从 javascript 源码到可运行的代码之间通常还有一道编译打包的工序，断点得打在编译出来的代码上；三，如果你不想在编辑器和浏览器之间来回切换，最好使用带调试功能的编辑器，如之前推荐过的 vscode 。

经验三：先总体、后局部；先输入输出，再中间环节；先大体流程再具体实现

一个维护几年的代码仓库，必定会有很多复杂的功能、流程。面对陌生的代码，一个好的习惯是先折叠二级代码，从整体上看代码的流程，不去了解细节。当你需要查看细节，比如某个方法时，先看方法的参数，再看方法的返回，这样就算你看不懂方法中间做了些什么事，你也能知道方法是怎样用的，返回了些什么。就算是细看某个方法，先看大体流程，再了解具体实现也是个好习惯。最后，如果某个环节实在看不懂，能暂时放下的就放下，放不下的就看看有没有对应的测试用例，如果都不能解决问题，就看看接下来的第四点经验吧。

经验四：查看 git 提交注解

看代码有时候会好奇作者为什么这样写，这时可以找到代码对应的 git 提交记录。看看提交注解，以及一并改动的地方。就知道这个改动是为了修复某个 bug ，或者是为了优化什么功能。如果你使用 vscode ，推荐安装 gitlens 插件，它在每一行代码后面显示相应的提交信息，还能快速显示对应提交的改动。