Vue.js的template 编译的理解

Vue.js Template 编译流程简析

vue 模板并不是直接运行的 HTML，而是经过 编译器把模板字符串编译成渲染函数（render function），然后通过虚拟DOM（VNode）和响应式数据驱动视图更新。

1. 模板 (Template)

<template>
  <div>{{ message }}</div>
</template>

2. 编译过程（Template Compiler）

2.1 解析 (Parse)

模板被解析成抽象语法树（AST）：

{
  type: 1, // 元素类型
  tag: 'div',
  children: [{ type: 2, expression: '_s(message)' }],
  ...
}

AST 是一种中间数据结构，描述模板结构和动态绑定。

2.2 优化 (Optimize)

分析 AST，标记静态节点和动态节点，提升性能。

2.3 代码生成 (Codegen)

把 AST 转换成渲染函数代码字符串：

with(this){return _c('div',[_v(_s(message))])}

然后用 new Function 生成真正的渲染函数。

3. 渲染函数 (Render Function)

渲染函数是一个纯函数，根据数据生成 VNode（虚拟DOM节点）。

function render() {
  return createElement('div', this.message)
}

4. 虚拟 DOM & 响应式更新

1. 渲染函数返回虚拟DOM树（VNode树）
2. Vue 把这个树和上一次的虚拟DOM树做对比（Diff算法）
3. 只对比差异部分，更新真实 DOM
4. 响应式系统会在数据变更时触发重新执行渲染函数，实现视图更新

总结

Vue 的 template 其实是编译成 render 函数

渲染函数产生虚拟 DOM

响应式数据改变时，重新执行渲染函数，更新 DOM

编译阶段生成的代码效率高，且支持运行时优化