如何阅读Vue3源码
# 前言
一个框架的源码的代码量是非常惊人的,刚开始看肯定都是一头雾水的。所以,这个时候就需要讲究一些阅读源码的方法,接下来我将分享下我自己阅读Vue3源码的一些方法。当然,不一定适合你,你可以对照着进行调整。
# 熟悉官方API的基本使用
比如你想了解Vue3响应式原理部分的源码实现,你不应该是上来就一头扎入Vue3的源码中,而是需要先去熟悉Vue3提供的响应式相关的官方API的使用,比如 ref
、reactive
等。需要仔细阅读官网对响应式API的解释和描述。注意,需要仔细。因为Vue的官方文档为了适应不同技术水平的开发者,有的用法写得比较隐晦,你需要自己去尝试后才能明白。
# 先去看解读文章
当你熟悉了API的使用,这个时候你就可以进行源码的阅读了。不过,仍然不建议你直接打开源码进行阅读。而是去搜索网上的源码的解读文章。虽然文章的质量参差不齐,但是通过阅读解析文章,你基本能了解源码的重要的模块和主线的过程,可以避免陷入死胡同,少走弯路。
# 带着问题去看
阅读源码最重要的其实不是 读
,而是 问
。也就是说,你需要带着问题去看。最终的目标是通过阅读源码,你的问题得到了解答。同时,不要过多纠结细节,主要关注主线逻辑。比如 Ref
这个API的实现,你可能只需要关注的是 Ref
是如何将你传递的值转换成响应式的。对于一些边界情况的分支判断,不需要过多关注。
# 单元测试入手
当你前面的步骤都准备好之后,就可以真正打开源码阅读了,直接从Github将vue3源码vue-next (opens new window)下下来
- 用
git clone git@github.com:vuejs/vue-next.git
- 或者zip下载
建议你使用第一种方法,因为不管是vscode还是webStorm,都可以通过安装插件的方式,看到每一行代码提交的作者和提交信息,特别是提交代码的信息对我们阅读源码非常重要。接着,我们可以先看单元测试文件。
- 每一个用例都有详细的注释,这对你熟悉Vue3有很大的帮助
- 源码中很多分支的判断都会在单元测试中有所体现
- 现成的例子,方便debug
# 学会debug
最后一点是最重要的,学会debug。Vue3单元测试框架是jest,vscode和webStorm都有jest的插件支持。具体如何在webStorm 和 vscode 中打断点。网上的教程一大堆,这里就不赘述了。debug 的过程也是一样,关注主线逻辑,一些边界分支的判断可以直接跳过。同时,debug 过程中需要学会观察,程序出现的结果是否是自己预料之中的结果。如果不是,需要自查是自己的理解错误还是debug过程中略过了不该略过的部分,就需要打多个断点进行观察。