当前位置：首页 > VUE

vue compile 实现

2026-01-07 19:34:42VUE

Vue 编译实现原理

Vue 的编译过程将模板字符串转换为渲染函数，主要分为解析、优化和代码生成三个阶段。

解析阶段（Parse）

将模板字符串转换为抽象语法树（AST）。Vue 使用正则表达式和有限状态机技术逐字符解析模板。

// 示例模板
const template = `<div id="app">{{ message }}</div>`;

// 解析后的AST结构示例
{
  type: 1,
  tag: 'div',
  attrsList: [{ name: 'id', value: 'app' }],
  attrsMap: { id: 'app' },
  children: [{
    type: 2,
    expression: '_s(message)',
    text: '{{ message }}'
  }]
}

优化阶段（Optimize）

标记静态节点和静态根节点，在后续更新过程中跳过这些节点的比对。

vue compile 实现

// 标记静态节点
function markStatic(node) {
  node.static = isStatic(node);
  if (node.type === 1) {
    for (let i = 0; i < node.children.length; i++) {
      markStatic(node.children[i]);
    }
  }
}

代码生成阶段（Generate）

将AST转换为可执行的渲染函数代码字符串。

// 生成的渲染函数代码
with(this) {
  return _c('div', { attrs: { "id": "app" } }, [_v(_s(message))])
}

核心编译函数

Vue 通过 createCompilerCreator 函数创建编译器，支持自定义编译选项。

vue compile 实现

export function createCompilerCreator(baseCompile) {
  return function createCompiler(baseOptions) {
    function compile(template, options) {
      const ast = parse(template.trim(), options)
      optimize(ast, options)
      const code = generate(ast, options)
      return {
        ast,
        render: code.render,
        staticRenderFns: code.staticRenderFns
      }
    }
    return { compile }
  }
}

运行时编译与预编译

运行时编译在浏览器中实时编译模板，需要包含完整的编译器代码。预编译在构建阶段完成，生成渲染函数，减少运行时开销。

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

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

自定义编译器

通过修改编译器选项可以实现自定义模板语法。

const { compile, compileToFunctions } = createCompiler({
  // 自定义元素类型检测
  isUnaryTag: tag => ['img', 'input'].includes(tag),
  // 自定义指令解析
  directives: {
    custom: (node, dir) => {
      // 处理自定义指令
    }
  }
})

模板到虚拟DOM的转换

编译生成的渲染函数执行后会创建虚拟DOM节点，包含标签名、属性、子节点等信息。

function _createElement(context, tag, data, children) {
  // 创建VNode的逻辑
  let vnode
  if (typeof tag === 'string') {
    vnode = new VNode(tag, data, children)
  }
  return vnode
}