当前位置：首页 > VUE

vue 模板引擎实现

2026-01-18 15:18:38VUE

Vue 模板引擎的实现原理

Vue 的模板引擎主要通过编译和渲染两个阶段将模板转换为真实的 DOM。以下是核心实现步骤：

模板编译阶段

解析模板为 AST（抽象语法树） 通过正则表达式或状态机将模板字符串解析为 AST 节点树。AST 描述了模板的结构，包括标签、属性、指令和插值表达式。

静态优化 标记静态节点（无动态绑定的节点），在后续更新中跳过这些节点的比对，提升性能。

生成渲染函数代码 将 AST 转换为可执行的 JavaScript 代码（渲染函数）。例如：

with(this){return _c('div',{attrs:{"id":"app"}},[_v(_s(message))])}

其中 _c 表示创建元素，_v 创建文本节点，_s 处理插值表达式。

虚拟 DOM 与渲染阶段

执行渲染函数生成 VNode 渲染函数执行后返回虚拟 DOM（VNode），是一个轻量化的 JavaScript 对象，描述真实 DOM 的结构。

vue 模板引擎实现

Diff 算法比对 VNode 通过对比新旧 VNode，找出最小化差异，仅更新必要的真实 DOM 节点。核心算法包括：

同层比较（不跨层级比对）
双端比较（优化列表节点的比对）

生成真实 DOM 根据 VNode 的差异调用原生 DOM API（如 createElement、setAttribute）更新视图。

响应式绑定实现

依赖收集与触发 模板中的插值或指令（如 v-model）会触发响应式属性的 getter，将当前 Watcher（渲染器）添加到依赖列表中。当数据变化时，通知 Watcher 重新执行渲染函数。

指令处理 编译阶段解析指令（如 v-if、v-for），生成对应的逻辑代码。例如 v-for 会转换为 _l 函数，动态生成列表节点的 VNode。

vue 模板引擎实现

示例：简易模板引擎实现

以下是一个极简的模板编译示例，展示如何将模板字符串转换为渲染函数：

function compile(template) {
  // 替换插值表达式
  template = template.replace(/\{\{(.*?)\}\}/g, '${_s($1)}');
  // 生成函数体
  const code = `with(this){return \`${template}\`;}`;
  return new Function(code);
}

// 使用
const render = compile('<div>{{ message }}</div>');
const data = { message: 'Hello Vue!' };
console.log(render.call(data)); // 输出: <div>Hello Vue!</div>