前言
最近想通过自己的能力去详细的阅读源码，以前阅读源码大多是看网上其他人的文章，看别人的见解，但是很多文章只是把源码贴出来，然后附加自己的见解，我阅读这样的文章虽然可以收获一些知识，但是不知道怎么去阅读源码。前人栽树，后人乘凉，同时我也想知道前人是怎么栽树的。
以前，我只是把源码拉下来，然后找index.js，开始一步步的看方法调用，这样子阅读非常的枯燥，因为不知道运行过程中，这些变量对应的值有哪些，哪些条件会命中等等，所以读起来非常的乏味。所以近期想沉下心来，自己去探索一下，如何更高效、科学地去阅读源码。
经过一方摸索，找到了现在的这个编译源码+运行官方的example+断点+疑问问题的阅读方法，经过尝试之后，我觉得这个方法非常nice。
都2023年了，vue3都出来了，怎么我还要阅读vue2的源码？因为我本身没有详细的读过vue2的源码，只是看别人的文章，自己再走马观花地翻阅下vue的源码，这种理解很不够全面，零零碎碎的。所以这一次，我想自己动手，通过自己的探索，从vue2着手阅读源码。
拉取vue2项目源码
git clone https://github.com/vuejs/vue.git
或者也可以folk一下vue2的源码仓库，然后在自己folk的仓库中创建独立的分支进行分析。
比如我自己就folk了一个仓库：github.com/AlanLee97/r…
创建新分支
切换到2.6版本最新代码，tag: v2.6.14，当然你也可以基于这个tag新建一个自己的分支。
为什么要这里选择2.6.14的版本呢，是因为我觉得目前大多数公司的老的vue项目都是2.5.x/2.6.x，所以我觉得选取最新的2.6.x的版本，也就是2.6.14来读源码是比较合适的。2.7.x就暂时不考虑了，因为我觉得大多数项目是不会直接升级vue版本的，要么新项目直接上3.x，所以2.7.x就没必要读源码了。
git checkout v2.6.14
# or
# git checkout -b your_new_branch_name v2.6.14 # 基于2.6.14创建自己的分支
这里我就是创建了自己的分支alanlee/read-source/v2.6.14
安装依赖
安装依赖，在vue项目根目录下执行npm install或者yarn install，推荐使用yarn
更多内容查看github.com/vuejs/vue/b…
构建源码
安装完依赖后，可以先运行一下命令npm run dev构建vue的代码，它会打包出dist文件夹，默认情况下，仓库拉下来就已经有dist文件夹了，然后我们可以重新构建一下。
找示例代码
找个项目例子试一下，打开vue文件夹下的examples文件夹
以todomvc为例
- 找到这行代码，把vue.min.js改为vue.js，引入未压缩的代码，这样我们才好阅读
- 用浏览器打开index.html文件
- 这时候会出现todomvc的界面
开始调试
这个时候已经可以调试了，可以在todomvc的代码上写一些调试代码，或者打开开发者工具打断点
这个代码是rollup打包之后的代码，虽然没有压缩，但是也不适合阅读源码，所以我们要改一下打包配置，映射出源码
修改打包配置，映射真正的源码
- 修改rollup打包配置，找到scripts/config.js文件，修改打包配置，增加output.sourcemap配置项为true
sourcemap: true
- 重新执行
npm run dev，这个时候就可以打包出源码映射文件了
- 然后在浏览器开发者工具中，给todomvc的app.js找个地方打断点，比如
new Vue({})的时候
- 多点几下“进入下一个函数调用”的箭头，或者按F11，就可以进入到vue的源码了，这个时候就可以随意的断点阅读源码了
- 也可以在调试的时候，理解完代码后，在源码上写上一些注释，例如我写的一些注释
总结
- 拉取项目源码或者folk源码到自己仓库
- 选取目标分支或者创建分支，便于在自己分支上调试修改代码、写注释等
- 安装项目依赖，构建项目源码
- 修改打包配置，打包出源码map文件，方便阅读时映射到源码
- 找个官方示例代码，打开开发者工具，打断点调试
