Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现

前言

这段是总结,不显得那么干巴巴。

最近三个月(7 ~ 9) 所有的空闲时间全部用在了 Vue3TypeScriptVite 这套体系上。今天也刚好是 9 月的最后一天,因为加班的原因,预计的计划也算是刚刚好完成。

这三个月是这样的:

小项目

先把 Vue3TypeScriptVite 的文档过了一遍,然后写了一个简单的网易云。

学完 Vue3、TypeScript 干什么,先来一个"网抑云"

大项目

也刚好内部有一个新系统要做,经过对比使用了 Vben Admin 这个开源项目,也总结了一些内容。

看源码

一边写项目一边看源码,差不多两个月的时间吧。以下都是总结的部分内容,内容较多导出的图也比较模糊,所有的原始文件都在 GitHub 上。

流程标记

我一直想把流程调试过程中的主要断点保存下来,以便后续再次看的时候能轻松的找到不过没找到方案。现在使用了 VsCodeTodo Tree 符合心中的预期,能高亮、能过滤、能搜索,如果需要调试就在浏览器对应的位置打上断点。

为什么给每个主要流程打上标记,因为在这么大的源码库里方法和文件来回跳转很正常不过了。如果这样就可以根据打的标记走,在研究分支细节的时候也能轻松回到主流程。

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第1张图片

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第2张图片

测试例子

如果调试测试例子是必不可少,所有都写了简单的用例。因为编译原理我没有深入研究只是理解了编译过程,所以我大部分都是先写 template 的方式测试,然后通过 template-explorer 编译,再根据编译结果手写 render 的方式实现。

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第3张图片

思维导图

在理解完一个功能实现后,都会重新梳理流程,把重要的点和调用关系图用思维导图的方式呈现出来用于加强理解。

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第4张图片

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第5张图片

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第6张图片

Mini 版本

理解核心功能,实现简易的版本实现,目前实现了两个 响应式原理 和 _DIFF 算法原理_。

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第7张图片

Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现_第8张图片

项目地址

你可能感兴趣的:(Vue3 源码分析总结:200+流程标记、20+思维导图、2+Mini 版实现)