what大家好，今天给大家推荐一款学习vue3源码的神器，也是阮一峰老师在周刊第144期推荐的杂志。我也是这个图书馆的作者。先介绍一下我为什么要做这个库，以及如何在这个库中使用mini-vue。可以看视频版：详解为什么vue3是目前最火的技术。大家除了学习如何使用之外，肯定想深入源码看看这些nb功能是如何实现的，或者增加自己的核心竞争力来了解原理。面试的时候装了13，但是打开vue3的源码，你会发现，代码量就这么多。应该在哪里阅读此源代码？虽然vue3代码的可读性很高，但是经不起代码量太大！！！比如renderer.ts中的baseCreateRenderer函数就有1800行代码之多，真是秃头。第一次看到这个功能的同学一定惊呆了。你怎么认为？我的头发还能保留吗？可能这个时候很多同学已经被劝退了（悄悄关闭vscode）说的是不是你-_-！这么大的代码量，我们可以用分而治之的思想，从小到大拆解，然后一个一个的拆解，其实仔细分析分析源码，你会发现有许多实际处理边缘情况或单独处理开发环境的逻辑。当你理解了vue3的核心逻辑后，这些逻辑就不需要关心了。比如这些画红框的逻辑：都是处理dev环境下的行为。当我们理解了核心逻辑后，这些点就可以先忽略了。我没说这些逻辑不重要，后面可以理解。先划重点，能有这样一个只涉及核心逻辑，去掉非核心逻辑，让代码更易读的库吗？能更好理解吗？其实社区会有这种类型的库，只实现了库的核心逻辑，让同学们更快速的了解库的核心逻辑，比如mini版，但是我没有找到这样的社区里的迷你版，干脆撸起袖子去了社区。其实为了让同学们能够快速理解基于mini-vue的vue3的核心逻辑，我在代码中着重强调了两个东西，并且在每个具体的代码中都添加了详细的注释详细的注释，让大家看得懂代码的行为更快，可视化运行过程。我已经在每个关键路径节点上给出了console.log。在这种情况下，您只需要打开调试器即可。可以看到详细的运行过程，当你想调试代码的时候，也可以通过console.log快速定位到具体的代码。为了我自己。从我自己的角度来看，看完代码，除了整理成文章，还有一个更好的验证自己是否真正掌握的方法就是自己实现功能，这对我来说也是一个巨大的收获.因为要想实现这个功能，首先要了解它，然后才能写代码。how那我就介绍一下这个图书馆怎么吃吧。下载首先需要下载库到本地库的入口gitclonehttps://github.com/cuixiaorui/mini-vue.gitREADME我在README里面详细记录了目前实现的功能和总结出来的脑图，就可以根据脑图把整个核心流程串起来。项目结构示例是在build之后放置一些demolib文件（demo实际执行的是文件）。src是核心逻辑。一开始可以先从例子中的demo入手，看看一个demo是如何运行的。首先，根据console.log输出调试代码。理解了核心的操作流程之后，就可以深入到具体的代码中，比如：看props是怎么做diff的，看children是怎么处理的。因为有详细的注释，只保留核心逻辑，所以读起来还是比较容易的。并且mini-vue中的所有函数名都与源码保持一致。大家可以复制函数名在vue3中搜索进行对比学习。当你掌握和理解了这个mini-vue之后，你就可以去看vue3了。源码，你会发现阅读起来真的没有那么难。最后可以观看更详细的mini-vue教程的视频版。如果这个库能帮到你，那么希望你能给我一个star作为开源的鼓励（你的鼓励就是我的动力）以后我会每天更新一点点，逐步完善mini-vue，希望能帮助到更多人热爱前端的同学。欢迎在issues中提出你的意见和建议，共同完善mini-vue
