📚前端面试题速记
Q7
★ ★ ★ ★ ★

Vue 3 的编译器和运行时是如何分离的？

⚡ 速记答案（30 秒）

编译器：构建阶段把 template 编成 render 函数，做静态提升等优化。运行时：只包含响应式、虚拟 DOM、组件生命周期等逻辑，不带编译器，体积更小。

📖 详细讲解

标准面试回答（推荐记住）

Vue 3 将编译器和运行时分离。编译器在构建阶段把 template 编译成 render 函数，并做静态提升等优化；运行时只包含响应式系统、虚拟 DOM、生命周期等核心逻辑。如果用构建工具预编译，生产环境只需要 runtime 版本，体积更小。

@vue/compiler-sfc vs @vue/runtime-core

编译器 (Compiler):
负责将 Template 字符串转换为 JavaScript 渲染函数。

  • Parser: 解析模板为 AST
  • Transform: 处理指令 (v-if, v-for) 和优化 (静态提升)
  • Codegen: 生成最终的 render 函数代码

运行时 (Runtime):
负责执行渲染函数并管理组件生命周期。

  • Virtual DOM: 创建和比较 VNode
  • Reactivity: 响应式数据驱动
  • Renderer: 平台无关的渲染接口 (Web/Weex/etc)

好处

  1. 体积更小：预编译后，浏览器端不需要加载编译器代码（约减少 10+KB）。
  2. 性能更好：编译工作在构建时完成，运行时无额外开销。

✅ 面试要点

  • •理解编译时和运行时的职责划分
  • •知道静态提升等编译优化
  • •了解不同版本的使用场景

💻 代码示例

编译器输出示例
// 模板
// <div class="container">
//   <span>{{ message }}</span>
// </div>

// 编译后的 render 函数
import { createVNode as _createVNode, toDisplayString as _toDisplayString } from 'vue'

// 静态提升：静态节点只创建一次
const _hoisted_1 = { class: "container" }

function render(_ctx) {
  return _createVNode("div", _hoisted_1, [
    _createVNode("span", null, _toDisplayString(_ctx.message))
  ])
}