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

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

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

html 复制代码

<template>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="handleClick">点击</button>
  </div>
</template>

看起来很直观。但问题是------浏览器不认识这玩意儿。{{ message }} 不是 HTML 标准，@click 也不是合法属性。你写的是"Vue 方言"，Vue 必须把它翻译成浏览器能跑的纯 JavaScript，翻译结果大概长这样：

javascript 复制代码

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

从 <div>{{ message }}</div> 到 h('div', {}, [this.message]) ------ 这个过程就叫模板编译。

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

一个比喻：翻译家

模板编译就像一个翻译家，把"HTML 方言"翻译成"JavaScript 母语"：

复制代码

     模板（HTML 方言）              渲染函数（JS 母语）
┌──────────────────────┐      ┌──────────────────────┐
│ <div class="box">     │      │ h('div',              │
│   {{ msg }}           │  ──》 │   { class: 'box' },   │
│ </div>                │      │   [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 文件里的 <template> 在打包阶段就被编译成了 render 函数。

复制代码

开发时                    打包后（发给用户）
┌────────────┐           ┌──────────────┐
│ .vue 文件    │  ──》    │ 纯 JS 代码    │
│ <template>  │  编译    │ render 函数   │
│ <script>    │          │ 不包含编译器   │
│ <style>     │          └──────────────┘
└────────────┘

好处：用户下载的代码不含编译器（编译器本身不小），体积更小，页面打开更快。

2. 运行时编译

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

html 复制代码

<div id="app">
  <p>{{ message }}</p>  <!-- 浏览器里当场编译 -->
</div>

好处：不用构建工具，写好就能跑。代价：需要引入完整版 Vue（含编译器），体积大不少。绝大多数项目都用构建时编译，运行时编译只适合快速写 demo 的场景。

一句话带走：Vue 模板编译是把 HTML 模板翻译成 JS 渲染函数的过程，分 Parse → Optimize → Generate 三步，通常在打包阶段完成。

如果喜欢文章,还请点赞一下，后续会继续用最简单的方式拆解vue源码。🙇‍