Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)
前言
这段是总结,不显得那么干巴巴。最近三个月(7 ~ 9) 所有的空闲时间全部用在了
Vue3
、TypeScript
、Vite
这套体系上。今天也刚好是 9 月的最后一天,因为加班的原因,预计的计划也算是刚刚好完成。这三个月是这样的:
小项目 先把
Vue3
、TypeScript
、Vite
的文档过了一遍,然后写了一个简单的网易云。学完 Vue3、TypeScript 干什么,先来一个"网抑云"
大项目 也刚好内部有一个新系统要做,经过对比使用了 Vben Admin 这个开源项目,也总结了一些内容。
- Vben Admin 深入理解之插件、环境变量的设计
- Vben Admin 深入理解之路由、菜单、权限的设计
- Vben Admin 深入理解之动态主题切换的设计
- GitHub 地址
我一直想把流程调试过程中的主要断点保存下来,以便后续再次看的时候能轻松的找到不过没找到方案。现在使用了
VsCode
的 Todo Tree 符合心中的预期,能高亮、能过滤、能搜索,如果需要调试就在浏览器对应的位置打上断点。为什么给每个主要流程打上标记,因为在这么大的源码库里方法和文件来回跳转很正常不过了。如果这样就可以根据打的标记走,在研究分支细节的时候也能轻松回到主流程。
![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/d59305eb72bc4bd2ae45e487ac00d86a.jpg)
文章图片
![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/d39faeb671fb4ea994f37d8f740a8548.jpg)
文章图片
测试例子
如果调试测试例子是必不可少,所有都写了简单的用例。因为编译原理我没有深入研究只是理解了编译过程,所以我大部分都是先写
template
的方式测试,然后通过 template-explorer 编译,再根据编译结果手写 render
的方式实现。![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/63e003eb837247f6bf3003d4101bb26c.jpg)
文章图片
思维导图
在理解完一个功能实现后,都会重新梳理流程,把重要的点和调用关系图用思维导图的方式呈现出来用于加强理解。
![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/43e2410b0ff746dd8c0ddb9f0e6a5566.jpg)
文章图片
![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/36b92ebe435e4bf8a7ad5fe930b09541.jpg)
文章图片
![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/792397b4e1844cd5ad7197f031cf73e4.jpg)
文章图片
Mini 版本
理解核心功能,实现简易的版本实现,目前实现了两个 响应式原理 和 _DIFF 算法原理_。
![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/e80c869814a5499b903f8495fe4692b7.jpg)
文章图片
【Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)】
![Vue3|Vue3 源码分析总结(200+流程标记、20+思维导图、2+Mini 版实现)](https://img.it610.com/image/info9/130df26702f04ffaa88b9cac3d87c5ef.jpg)
文章图片
项目地址
- GitHub 地址
推荐阅读
- 如何寻找情感问答App的分析切入点
- D13|D13 张贇 Banner分析
- 自媒体形势分析
- 2020-12(完成事项)
- Android事件传递源码分析
- Python数据分析(一)(Matplotlib使用)
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- 泽宇读书会——如何阅读一本书笔记
- Java内存泄漏分析系列之二(jstack生成的Thread|Java内存泄漏分析系列之二:jstack生成的Thread Dump日志结构解析)
- [源码解析]|[源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3)