在去年6月份接触到vue3，上手感觉直接起飞爽爆了，就对vue3情有独钟了。之后又在github上看到了许多大佬都实现了自己的mini-vue，心想着自己也实现一个，于是我就去看大佬们的mini-vue但是。。。。。我看不懂。这就很烦！！！后来才发现知识断层太多，压根看不懂，相信许多小伙伴看源码都遇到过这种问题。后续笔者将会分享如何去学习源码并如何写出属于自己的mini-vue。
- 先贴出mini-vue3的源码地址: mini-vue3
参考
崔大佬的mini-vue 注释很清楚很适合学习
vue.js设计与实现.霍春阳
mini-vue3介绍
采用和vue3源码相同的monorepo前端项目管理，源码结构、函数名和vue3基本一致
核心功能
- reactivity
- reactive 只支持普通对象和Map、Set对象的响应式代理
- shallowReactive
- readonly
- shallowRedonly
- ref
- shallowRef
- unref
- proxyRefs
- toRef
- toRefs
- effect
- ReactiveEffect
- computed
- runtime-core
- KeepAlive组件
- Teleport组件
- defineAsyncComponent
- defineComponent
- createAppAPI
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmounted
- watch
- patch
- emit
- slots
- h
- scheduler调度器
- createVNode
- createRenderer
- runtime-dom
- createApp
- createSSRApp
- Transition 组件
- ensureRenderer
- ensureHydrationRenderer
- render
- hydrate
- compiler-core
- baseParse
- baseCompile
- codegen
- transform
- transformElement
- transformText
- transformExpression
- transformBind
- transformOn
- transformIf
- transformFor
- compiler-dom
- parse
- compile
- template-explorer
- 支持编译生成render函数代码预览
- shared
- 基本的通用工具函数和枚举
- vue
- compile 返回一个render函数
- 全局统一导出miniVue3供外部使用，目前只支持global引入和esModule方式引入
- server-renderer
- renderToString
- renderVNode
- compiler-sfc
- 未完成
项目整体结构
如何肝出来的？
其实对于刚想学习源码的小伙伴来说，直接看代码是非常吃力的，因为源码里存在许许多多的细节、bug补丁、异常处理、环境切换等等代码。总之直接去看源码容易失去学习源码的信心。那么我们应该如何有效的学习vue3源码？下面我将把我学习源码的过程分享给大家。
开始准备
首先学习vue3源码，必须得对vue3熟悉，什么才叫熟悉？就是你得知道每个api的用法，和作用。这个大家应该都会吧，不熟悉的直接看vue3中文文档。
熟悉了之后干嘛？有的人可能会说：看别人写的mini-vue。其实这种方式在笔者看来也是行不通的，首先大佬们写的mini-vue其实都是模块化了的，直接看你会无从下手。到底是从reactive模块开始？还是runtime模块开始呢？这个问题我们一会儿再说。
百行code实现super-mini-vue
有的小伙伴可能有有点疑惑了。一百行实现？不是说开始从哪个模块开始学习吗？其实写一个和vue源码结构相同的mini-vue是比较难的。这里的难不是代码难，而是模块之间的依赖关系对于初学者来说是比较难理解的，所以用一个几百行就能完成的super-mini-vue是为了解各模块之间的依赖关系，从整体上出发。笔者当时学习源码时也是从这开始的。这里实现super-mini-vue的推荐两个高质量视频
- 跟尤雨溪一起解读Vue3源码【中英字幕】- Vue Mastery 尤大亲自教授确定不学一波？
- Vue 3响应式原理 (Vue 3 Reactivity)【中英字幕】- Vue Mastery 这个是响应式原理的教学是外国大佬讲解非常有意思
上面这两个视频是全英文的，对于笔者这个拉跨英语是听不懂的，但是有中文字幕问题不大。(看字幕学习真的效率太慢了，笔者一个6分钟的视频学了30分钟左右)
这里给出视频中实现super-mini-vue的源码 源码地址
模块化方式的学习
如果你将上述super-mini-vue学习完了之后，一定对vue原理有了初步的认识。明白了什么是响应式数据，什么是渲染函数、什么是虚拟节点。那么就可以进行下一步了，对代码进行模块化的编写并实现，笔者使用的是monorepo同vue源码一样采用项目管理方式进行构建开发。以下这几个视频是采用的monorepo实现的mini-vue
- monorepo版vue3原理视频教程 这里只实现了runtime-core、runtime-dom、reactive三个模块的
上面的视频学习完成之后你会发现vue3原理其实挺简单的，但是有得人会问，为什么没有编译模块的教程？（白嫖还嫌！！）不过编译模块嘛还是能实现的，下面是详细视频教程。
- 编译模块的视频 这个视频可以参照集成进自己的项目中
- 一个大佬总结的编译方面的文章可以去看看，笔者的mini-vue3就是按照它的思路实现的
- 崔大佬的mini-vue也实现了编译模块，功能有点少。可以对比着看，可以将里面的功能集成到自己的mini-vue中
- 霍春阳大佬的Compiler优化文章
这里再给大家推荐一本Vue.js官方团队成员霍春阳大佬写的一本关于vue3源码的书籍 《vue.js设计与实现》 ，这本书对vue3原理写的非常的详细，满满的干货可以去购买看看。笔者是边看这本书边看上方视频进行整合。
进攻vue3源码
到这个阶段我想你已经对vue3源码的结构、源码运行流程、模块间的配合已经很清楚了。由于知识断层已经补充完毕，接下来就可以深入研究vue3源码的细节，剩下的只能看自己的理解能力。
总结
最后在学习完成之后一定要记 反复反复再反复的看自己实现的mini-vue ，不然你就会发现你学了这个模块忘了那个模块，这样得不偿失。
以上便是我对学习vue3源码的一些见解，没有什么原理性的代码，只是提供给大家学习的思路。后续还会持续输出一些关于vue源码实现的文章，请各位小伙伴多多支持。由于笔者语言描述能力不是太强，上述文章有错误请多批评指正。
喜欢本次文章分享请点个赞吧！！ 最后再附上笔者的 mini-vue3
