针对于现在存在的很多源码解析文章,以及个人之前的文章中,会存在以下问题:
- 示例代码太多
这可能是源码解析写作的通病吧。其实大多数人从vue和react这样框架的生命周期API就可以大致猜出内部流程是什么,示例代码太多反而会产生枯燥感,而且部分示例代码又长又臭,甚至不得不加上大段的注释,严重降低了阅读体验。 - 解析流水账
既然代码是给计算机看的流水账,那解析就不能再是给人看的流水账。对于源码解析来说,最大的误区是去弄懂每一行甚至每一个变量的意义,而这最终会导致事倍功半。所以源码解析应以高屋建瓴的意识去写作,所以个人在编写源码解析的时候,会从架构、层次等方面进行编写。 - 缺乏提炼
我们初高中上语文课的时候,总会被问到这篇文章的中心思想是什么。同样,在编写源码解析的时候,作者也应该给出自己的见解,比如Vue3.0和Vue2.0在某方面的做法的区别是什么?整体的代码结构是长什么样子的?作者这么做有什么好处?这样读者不仅仅能够了解到源码的逻辑,也能够对源码的架构进行学习。
本教程根据个人的经验、思考尽量从分类、设计思想、对比等几方面来进行讲解
Vue3.0预览版的源码,而不是从头到尾抓住源码进行一行一行解析,其中亮点有如下:
- 将作用相同的东西进行分类,比如代理handler、effect类型等。
- 根据阅读经验,将Vue2.0与Vue3.0都同一个代码\功能的实现进行对比,并且分别讲解其优缺点。
- 对核心代码进行讲解(这是必要的)。
- 对重要的数据结构及其构建进行说明。
最后的最后,笔者给出了文章的传送门: