这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情”
前言
学习源码的目是从中获取灵感，然后最后能自己造工具，如果只是为了面试的话，那么最后也很难发展的。从今天起，笔者开始输出自己的对vue3源码的一些理解。
vue3源码结构
构建
vue3采用的TS编写，用的rollup打包，社区里面的开源框架基本都采用的rollup打包，rollup确实更适合做基建。与此同时，vue3采用pnpm去实现Monorepo，从而实现性能提升。
结构组成
vue3源码结构如下，其核心组成部分为reactiivity（响应式）、runtime-core&runtime-dom（运行时）、compiler-core&compiler-dom（编译器模块），其他的还有一些和ssr相关的操作、shared（一些公共方法）等。
其各个模块之间依赖关系如下图所示:
响应式
打开reactiivity模块，如下图所示，其中tests模块是响应式这块对应的单测，可以下载相关的插件去通过单测的方式debugger调试相关的源码实现。其中effect.js里面的effect对应vue2里面的watcher，dep.js是和容器相关的源码，baseHandlers.js里面封装了收集依赖和触发依赖的一些相关操作。ref.js和computed.js分别实现的是vue3里面的ref和computed这两个核心的响应式api，它们的实现也依赖于effect里面的ReactiveEffect这个类，后续会慢慢分析。
运行时
其中runtime-dom是对dom的封装，从而实现跨端的操作，然后传入runtime-core里面进行拆解，其中createApp就在这一模块里面（用于创建组件实例）。其中runtime-core就是运行时主要的源码了，如下图所示:
这一块包括h函数、patchElement、patchcomponent、nextTice以及renderer里面的diff算法等都源自这一模块。
编译器
babel给react开后门，为其实现好了编译器，而vue是自己去实现的编译器模块。vue3在编译器模块做了些优化，静态节点提升、做缓存等。其中编译器大概的流程是通过 baseParse 生成 AST ->使用 transform 对AST 做处理->通过 generate 生成 最终代码 （render 函数）。
最后
从git的记录来看，vue3花了今年时间才写出来的，想要彻底搞懂其底层原理，需要一定的时间和精力。后续会具体分析vue3的各个模块。
