前言

这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情” 其实现在这家公司主流技术栈是react，但是个人还是想把vue3源码这一块写出来，毕竟是以前沉淀下来的东西，而且这对于我个人来说就是一个从0到1的过程。等写完之后，我就要把重心放在react上面了。到时候也会写和react相关的文章。

正文

vue3运行时这块其实内容还挺多的，接下来我们大致来梳理一下。运行时这块还涉及到响应式那块，响应式是vue3的发动机，处处离不开响应式。

核心api

如下图所示，可以发现，这一块有很多核心api。比如vue3的生命周期、h函数、setup、emit、props、slots、nextTice等很多常用的api都出自vue3运行时这一块。 这里面截图没有截全，这里面还包括renderer.ts 运行时的其中一个非常核心的模块就是renderer.ts，大名鼎鼎的diff算法就是源自renderer.ts这个文件。与此同时，运行时还依赖于runtime-dom，runtime-dom是对dom的封装，从而实现跨端的操作，然后传入runtime-core（运行时）里面进行拆解，其中createApp就在这一模块里面（用于创建组件实例）

运行时的大致流程

说完了核心api,接下来我们来看下运行时的大致流程。仔细研究源码的话会发现核心模块从patch开始，在执行patch后，大致分为两大块，其中一块是processElement，另一块是processComponent，其中processComponent是处理组件类型，最后还是要递归回来执行processElement，而processElement的终点就是diff算法，diff算法里面最难的也就是最长递归子序列算法，也是vue3里面最难的地方。这一块的话，可以通过debug的形式以及画流程图的形式来搞懂，运行时代码虽然多，但是其实比较好理解。

结尾

vue3运行时的大致框架就是上面这些，下一篇文章将逐个分析运行时里面的一些比较核心的api。