vue compile 实现

Vue 编译实现的核心流程

Vue 的模板编译过程将模板字符串转换为渲染函数，涉及解析、优化和代码生成三个阶段。以下是关键实现细节：

模板解析阶段

将模板字符串转换为抽象语法树（AST）。Vue 使用正则表达式和状态机逐字符解析模板，识别元素、指令、插值等内容。

// 简化版解析示例
const ast = parse(templateString, {
  isUnaryTag,
  canBeLeftOpenTag,
  isNonPhrasingTag,
  isPreTag
})

静态节点优化

遍历 AST 标记静态节点（不依赖响应式数据的节点），在后续更新时跳过这些节点的比对。

function markStatic(root) {
  if (root.type === 1) {
    root.static = isStatic(root)
    for (let i = 0; i < root.children.length; i++) {
      markStatic(root.children[i])
    }
  }
}

代码生成

将优化后的 AST 转换为可执行的渲染函数代码字符串。处理指令、事件、插值等模板特性。

function generate(ast) {
  const code = ast ? genElement(ast) : '_c("div")'
  return {
    render: `with(this){return ${code}}`,
    staticRenderFns: state.staticRenderFns
  }
}

编译器核心函数

compileToFunctions 是主要入口函数，整合整个编译流程：

function compileToFunctions(template, options) {
  const ast = parse(template.trim(), options)
  optimize(ast, options)
  const code = generate(ast, options)
  return new Function(code.render)
}

运行时编译器与预编译

开发环境通常使用包含编译器的完整版 Vue（runtime + compiler），生产环境推荐预编译模板为渲染函数。

// 运行时编译
new Vue({
  template: '<div>{{message}}</div>'
})

// 预编译
new Vue({
  render(h) {
    return h('div', this.message)
  }
})

自定义编译器选项

可以通过编译器选项自定义分隔符、保留标签等行为：

Vue.compile(template, {
  delimiters: ['${', '}'],  // 修改插值语法
  comments: true           // 保留注释
})

源码关键模块

Vue 编译器主要实现在以下核心模块：

• src/compiler/parser/index.js（解析器）
• src/compiler/optimizer.js（优化器）
• src/compiler/codegen/index.js（代码生成）

理解这些实现细节有助于开发自定义指令、优化模板性能或实现特定编译功能。