Vue 3 中编译时和运行时的概念区别

前言

详细整理 Vue 3 中编译时和运行时的概念区别，并重点解释为什么组件实例是在运行时创建的。
我会结合官方文档、源码分析和社区解释，确保内容清晰易懂，并配有示意图来说明组件生命周期中的创建时机。

Vue 3 中的编译时 vs 运行时区别

在 Vue 3 中，编译时（compile time）指的是框架在运行应用之前，对组件模板进行的编译处理；而运行时（runtime）是指应用实际执行、组件实例创建和更新 DOM 的阶段。简而言之，编译时将模板“翻译”成渲染函数代码，运行时则执行这些代码来创建组件实例、处理响应式数据并操作真实 DOM。

在 Vue 3 中，模板会先被编译为渲染函数代码，然后在运行时执行渲染函数产出虚拟 DOM 树，并据此更新真实 DOM。组件实例持有响应式状态，当状态变化时会触发重新渲染和虚拟 DOM patch 更新真实 DOM。

模板在编译时转化为渲染函数

Vue 采用类似 Vue 2 的策略：提供类 HTML 的模板语法，但会在编译时将模板编译成等价的 渲染函数，该渲染函数返回虚拟 DOM (VNode) 树。这个编译过程主要分三步：

1. 解析 (parse)： 将模板字符串解析生成对应的 抽象语法树 (AST)。AST 是模板的结构化表示，包含节点类型、属性等信息，用于后续优化和代码生成。在这一步，编译器可以识别模板中的指令和结构，例如 v-if、v-for、自定义组件标签等。

2. 转换 (transform)： 对 AST 进行一系列转换和优化处理。Vue 3 引入了插件化的 AST 转换管线，每种指令 (如 v-if、v-for、v-model 等) 都对应一个转换插件，对 AST 节点进行操作。同时，编译器在此阶段对模板进行静态分析，找出模板中不会改变的静态内容和结构。对于静态节点或静态子树，编译器会做标记，并执行静态提升等优化：将这些静态节点提升为常量，从渲染函数中提取出来。这样在每次重新渲染时就无需重复创建和对比这些不变的节点，提高运行时性能。

3. 代码生成 (generate)： 将优化后的 AST 转换为对应的渲染函数代码字符串。最终得到的渲染函数会返回虚拟 DOM 树。例如，一个简单模板 <h1>Hello, {{ name }}</h1> 编译后可能生成类似的渲染函数（简化示意）：

   function render(ctx) {with(ctx)