Vue 模板编译：HTML 是怎么变成 JS 的？

你写的模板，浏览器不认识

用 Vue 写代码的时候，你一定写过这样的模板：

看起来很直观。但问题是——浏览器不认识这玩意儿。{{ 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]) —— 这个过程就叫模板编译。

h() 是 Vue 创建虚拟 DOM 节点的方法，h('div', { id: 'app' }, children) 相当于"创建一个 div 元素，id 为 app"。

一个比喻：翻译家

模板编译就像一个翻译家，把"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 文件里的