Skip to content

🚀 Vue3 体系源码分析、流程标记、思维导图、Mini 版实现。

License

Notifications You must be signed in to change notification settings

haiweilian/vnext-analysis

Repository files navigation

vnext-analysis

此项目是在研究 Vue3 体系的源码分析的总结记录。现有 200+ 流程标记、20+ 思维导图、2+ Mini 版实现。

体系进度

  • Vue 3.2.0
  • Vue-Router 4.0.0
  • Vuex 4.0.0
  • Pinia 2.0.0
  • HcySunYang《Vue.js 设计与实现》

流程标记

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

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

1.1.流程标记

1.2.流程标记

调试配置

学习源码调试和列子是必不可少的,所以项目中调试配置都已集成,可以看 调试配置 中的详情说明。

2.1.调试配置 2.1.调试配置

思维导图

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

思维导图

响应式实现原理

简易实现

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

4.1.Mini

4.2.Mini

参考资料

感谢所有社区优秀资源的贡献者们。

Vue3 设计与实现

Vue3 核心源码解析

About

🚀 Vue3 体系源码分析、流程标记、思维导图、Mini 版实现。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published