Vue模板编译：HTML如何变成JS？

作者：技术拾光时间：2026-06-25 08:23:06浏览：274

Vue模板编译将{{message}}等非标准HTML转换为渲染函数，过程包括解析生成AST、优化标记静态节点、生成代码字符串。编译主要在构建时通过打包工具完成，以减少体积；运行时编译仅适用于快速演示。

在使用 Vue 编写代码时，你一定遇到过这样的模板：

Vue模板编译：HTML如何变成JS？

看起来非常直观，对不对？但问题的关键在于——浏览器根本看不懂这类写法。{{ message }} 并非 HTML 标准，@click 也不是合法的属性。你写的其实是“Vue 方言”，Vue 必须将其翻译成浏览器能够直接运行的纯 JavaScript。翻译结果大致如下：

function render() {
  return h('div', { attrs: { id: 'app' } }, [
    h('p', {}, [this.message]),
    h('button', { on: { click: this.handleClick } }, ['点击'])
  ])
}

从

{{ message }}

到 h('div', {}, [this.message]) —— 这个过程被称为模板编译。

一个比喻：翻译家

模板编译就像一位翻译家，将“HTML 方言”转化为“JavaScript 母语”：

     模板（HTML 方言）              渲染函数（JS 母语）
┌──────────────────────┐      ┌──────────────────────┐
│      │      │ h('div',              │
│   {{ msg }}           │  ──》 │   { class: 'box' },   │
│                 │      │   [this.msg])          │
└──────────────────────┘      └──────────────────────┘

和使用翻译软件将中文转成英文类似——语言改变了，含义不变。

三大步骤

翻译并非一步完成，共分三步：

模板字符串
    │
    ▼
┌─────────┐
│  Parse  │  将字符串转换为 AST（抽象语法树）
│  解析    │  类似把汉语句子拆分成主谓宾
└────┬────┘
     │
     ▼
┌─────────┐
│ Optimize│  标记静态节点——不会变化的部分标出来
│  优化    │  避免每次重新创建，节省资源
└────┬────┘
     │
     ▼
┌─────────┐
│ Generate│  将 AST 转换为代码字符串
│  生成    │  最终输出 render 函数
└────┬────┘
     │
     ▼
function render() { return h(...) }

用一个生活中的例子帮助记忆：

步骤	类比	输入	输出
Parse	将一段中文拆分成主谓宾定状补	HTML 字符串	AST 语法树
Optimize	标出文中“固定搭配”，不必每次查词典	AST	带静态标记的 AST
Generate	将中文句子翻译成英文	优化后的 AST	`function render() { ... }`

编译发生在什么时候？

1. 构建时编译（主流）

在使用 webpack + vue-loader 或 Vite 进行打包时，.vue 文件中的会在打包阶段直接编译为 render 函数。

开发时                    打包后（发给用户）
┌────────────┐           ┌──────────────┐
│ .vue 文件    │  ──》    │ 纯 JS 代码    │
│

优势：用户下载的代码中不含编译器（编译器本身体积不小），因此包体积更小，页面加载速度更快。

2. 运行时编译

直接在浏览器中引入 Vue，模板写在 HTML 中，Vue 初始化时现场编译：


  {{ message }}

优势：无需构建工具，编写后即可运行。代价：需要引入完整版 Vue（包含编译器），体积明显更大。绝大多数项目采用构建时编译，运行时编译仅适用于快速写 demo 的场景。