vue 源码

源码目录 Vue 源码的目录结构比较清晰, 除了项目架构的配置文件,最主要的两个目录:

package: 源码目录,Vue3 的源码都放在这里 scripts: Vue3 的脚本文件, 用来存放配置文件,进行编译和打包

1. compiler-core: 编译解析核心,与具体环境无关,主要生成 AST, 并根据 AST 生成 render()方法
2. compiler-dom: 浏览器环境中模板解析逻辑, 如处理 HTML 转义, 处理 v-model 等指令
3. compiler-sfc: 负责解析 Vue 单文件组件
4. compiler-ssr: 服务端渲染环境中的模板解析逻辑
5. reactivity: 响应式数据相关逻辑,Proxy 就在这里面
6. runtime-core: 运行时与创建实例相关代码
7. runtime-dom: 浏览器环境中的运行时核心
8. runtime-test: 内部测试代码
9. server-renderer: 用于 SSR 服务端渲染的逻辑
10. shared: Vue3 工具库，一些通用方法
11. size-check: 用于测试 tree shaking 后代码大小的示例库
12. template-explorer: 用于检查模板编译后的输出, 主要用于开发调试
13. vue: Vue3 主入口文件,包括运行时和 编译器

最重要的模块有 5 个, 分别为

compiler-core

compiler-dom

runtime-core

runtime-dome

reactivity

                      +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

vue 的源码包含三大核心系统

Reactivity 模块: 响应式系统, 主要职责是监听响应式数据

Runtime 模块: 也可以称之为 Render 模块, 真正负责渲染的模块, 主要职责就是将虚拟节点渲染成真实的元素,然后显示在浏览器上

Compiler 模块: 编译模块系统, 主要职责就是将 template 模板解析,生成 render 方法

TIP