深度解剖 Vue3 架构：编译时 + 运行时的协作

架构设计

vue源码主要包括如下几个核心包

编译时
- compiler-core 编译的核心模块，负责将模版转为渲染函数render
- compiler-dom 在core的基础上增加了对浏览器环境DOM的处理
- compiler-sfc 用来处理单文件组件，使用compiler-dom将模版编译为渲染函数
数据响应式
- reactivity 包括响应对象API，追踪依赖，依赖触发的逻辑
运行时
- runtime-core 负责创建组件实例，处理组件生命周期，生成虚拟DOM，更新DOM的diff算法等
- runtime-dom 在core的基础上增加浏览器环境对DOM的支持

运行时和编译时

这里参考《Vue.js 设计与实现》的例子

运行时
1. 运行时可以理解为，将一个数据通过渲染函数，渲染为真实的DOM结构，这个过程就是运行时
2. 纯运行时存在性能瓶颈（因为一般是将写好的代码字符串交给渲染函数解析运行）；同时无法做静态分析（没有办法检查代码）
JavaScript 复制代码
```
const obj = {
  tag: "div",
  children: [{ tag: "span", children: "hello world" }],
};
Render(obj, document.body)
```
编译时
1. 编译，比如C语言的编译成汇编语言，或者机器码，本质是从一种更高级简洁的语言转换为了另一种更低级复杂的语言
2. 上面的例子中，使用对象表示时，书写比较困难，如果能有一种书写方式，符合人的直觉，且可以转换为对象，就能提升编写体验。而其中的转换过程，就是编译，在Vue中就是将模版语法转换为渲染函数
JavaScript 复制代码
```
const code = `
<div>
  <span>hello world</span>
</div>
`
compile(code)
// 转换为 obj
const obj = {
  tag: "div",
  children: [{ tag: "span", children: "hello world" }],
};
```

编译时+运行时

结合两者优点，支持静态分析和动态性

JavaScript 复制代码

const code = `
<div>
  <span>hello world</span>
</div>
`
// 编译时
compile(code)
// 转换为 obj
const obj = {
  tag: "div",
  children: [{ tag: "span", children: "hello world" }],
};
// 运行时
Render(obj, document.body)

编译时

Vue3 编译过程涉及多个模块的协同工作，主要包括 compiler-core、compiler-dom 和 compiler-sfc。同时在打包阶段使用到vue-loader或者vite-plugin-vue生成JavaScript模块

整体流程

流程简述

compiler-sfc 负责处理单文件组件（SFC）
- 解析 SFC 文件：使用 parse 函数将 .vue 文件解析成 SFCDescriptor 对象。这个对象包含了 template、script 和 styles 等部分。
- 处理模板：如果存在模板部分，将其传递给 compiler-core 和 compiler-dom 进行编译。
- 生成代码：将处理后的模板代码、脚本和样式组合成一个完整的组件对象，最终生成 JavaScript 代码。
compiler-core 主要负责将模版转换为渲染函数
- 解析（Parser）：使用 baseParse 函数将模板字符串解析成抽象语法树（AST）。
- 转换（Transform）：使用一系列转换插件（transforms）对 AST 进行转换，例如处理指令、插值和事件等。
- 代码生成（Codegen）：将转换后的 AST 转换成 JavaScript 渲染函数。使用 generate 函数生成最终的渲染代码。
compiler-dom 是 compiler-core 的一个扩展，针对浏览器环境进行了优化
- DOM 特定的解析与转换：处理与浏览器 DOM 相关的特性，例如 HTML 标签、属性和事件。compiler-dom 提供了一些特定于 DOM 的转换插件，这些插件在 compiler-core 的基础上进行扩展。
- 平台特定优化：通过优化特定于浏览器的代码生成，来提升性能。

运行时

运行时的核心是渲染器的设计，在runtime-core包中，runtime-dom增加了一些浏览器环境DOM的支持，比如Transition组件、v-model、v-on等等

渲染器设计

渲染器的源码在：packages/runtime-core/src/renderer.ts

渲染器是baseCreateRenderer返回的对象

渲染函数是返回对象的render属性

渲染器中最重要的是diff算法，分为

简单diff
双端diff
快速diff（也是vue3现在使用的）

关于这部分，后续作者学会了再更新😂