前言

写本文的背景 《鸽了六年的某大厂面试题：你会手写一个模板引擎吗？》

阅读本文前请务必先阅读解析篇 《手写 Vue 模板编译（解析篇）》

复习

在前文 《手写 Vue 模板编译（解析篇）》 中，我们已经知道，模板编译的过程分为三步：解析、优化、生成。

1. 解析 parse：在这一步，Vue 会解析模板字符串，并生成对应的 AST
2. 优化 optimize：这个阶段主要是通过标记静态节点来进行语法树优化。
3. 生成 generate：利用前面生成 AST（抽象语法树）转换成渲染函数（render function）。

在前文中，我们已经学习了如何生成 AST 接下来我们需要学习如何 optimize 和 generate。

optimize：优化 AST

第一步：标记静态节点

如上文所说，这个阶段主要是通过标记静态节点来进行语法树优化，在进行优化后，Vue 会在 AST 中标记某个节点是否为静态节点。

在上一节生成 AST 中，我们定义了节点类型：

• 元素节点 type=1
• 表达式节点 type=2
• 文本节点 type=3

在不存在子节点时：

• 首先文本节点必为静态节点，因为文本内容固定不变。
• 其次表达式则必不为静态节点，因为它的值依赖于引用的表达式。
• 最后普通节点，如果有 v-if 或 v-for 指令就是动态节点，否则是静态节点

  注：实际 Vue 中还有 v-bind 等指令也会让节点变为动态，这里简化处理

/**
 * 判断一个节点是否为静态节点
 */
function isStatic(node) {
  // 如果节点是表达式节点，则不是静态节点
  if (node.type === 2) {
    return false
  }

  // 如果节点是文本节点，则是静态节点
  if (node.type === 3) {
    return true
  }

  // 如果节点没有 v-if 和 v-for 指令，则是静态节点
  return !node.if && !node.for
}

对于有子节点的情况：父节点必须满足以下两个条件才能成为静态节点：

1. 自身是静态节点（没有 v-if、v-for 等动态指令）
2. 所有子节点都是静态节点

接下来我们处理节点树

/**
 * 标记一个节点是否为静态节点
 */
function markStatic(node) {
  // 先用 isStatic 判断当前节点自身是否为静态
  node.static = isStatic(node)
  // 如果是元素节点，需要检查子节点
  if (node.type === 1) {
    // 遍历所有的子节点
    for (let i = 0, l = node.children.length; i < l; i++) {
      const child = node.children[i]
      // 先递归处理子节点
      markStatic(child)
      // 只要有一个子节点是动态的，父节点也必须是动态的
      if (!child.static) {
        node.static = false
      }
    }
  }
}

第二步：标记静态根节点

接下来是 Vue 优化系统的另一个关键部分 markStaticRoots。

markStaticRoots 函数用于标记静态根节点，被标记为静态根节点的元素及其子树会在代码生成阶段被特殊处理：

1. 提升为常量：将其渲染代码提升到 staticRenderFns 数组中，只生成一次
2. 跳过 patch：更新时直接复用，不需要重新创建和对比 VNode
3. 性能提升：减少运行时的计算开销

/**
 * 标记静态根节点
 * @param {Object} node - AST 节点
 */
function markStaticRoots(node) {
  if (node.type === 1) {
    // 只有元素节点才处理

    // 判断是否为静态根节点：必须是静态节点 + 有子节点
    if (node.static && node.children.length) {
      node.staticRoot = true
      // 找到静态根后直接返回，子节点会被整体提升，无需继续遍历
      return
    } else {
      node.staticRoot = false
    }

    // 递归处理所有子节点
    if (node.children) {
      for (let i = 0, l = node.children.length; i < l; i++) {
        markStaticRoots(node.children[i])
      }
    }

    // 处理 v-if 的其他分支（v-else-if、v-else）
    // 注意：从 i=1 开始，因为 ifConditions[0] 就是当前节点
    if (node.ifConditions) {
      for (let i = 1, l = node.ifConditions.length; i < l; i++) {
        markStaticRoots(node.ifConditions[i].block)
      }
    }
  }
}

现在我们来实现 optimize

function optimize(root) {
  if (!root) return
  // 第一步：标记静态节点
  markStatic(root)
  // 第二步：标记静态根
  markStaticRoots(root)
}

举个例子来看看效果：

// 要处理的模板字符串
const str = `<div><h1 v-if="true">hello</h1><h2>cookie</h2></div>`

// 解析为 ast
const ast = parse(str, {
  // ...
})
// 优化 ast
optimize(ast)

console.dir(ast, {
  depth: null,
})

打印结果：

<ref *2> {
  type: 1,
  tag: 'div',
  attrsList: [],
  attrsMap: {},
  children: [
    <ref *1> {
      type: 1,
      tag: 'h1',
      attrsList: [],
      attrsMap: { 'v-if': 'true' },
      children: [ { type: 3, text: 'hello', static: true } ],
      if: 'true',
      ifConditions: [ { exp: 'true', block: [Circular *1] } ],
      parent: [Circular *2],
      static: false,
      staticRoot: false
    },
    {
      type: 1,
      tag: 'h2',
      attrsList: [],
      attrsMap: {},
      children: [ { type: 3, text: 'cookie', static: true } ],
      parent: [Circular *2],
      static: true,
      staticRoot: true
    }
  ],
  static: false,
  staticRoot: false
}

可以观察到 <h2> 节点被标记了静态根节点。

生成代码前置知识

1、new Function

我们知道创建函数除了常用的函数声明、函数表达式、箭头函数以外，还有一个不常用的：构造函数。语法如下：

new Function(corpsFonction)
new Function(arg1, corpsFonction)
new Function(arg1, ...argN, corpsFonction)
// 例：
const addFn = new Function('a', 'b', 'return a + b')
const sum = addFn(1, 2) // 3

• argN：可选，零个或多个，函数形参的名称，每个名称都必须是字符串
• corpsFonction：一个包含构成函数定义的 JavaScript 语句的字符串。

2、with 语句

with 可以将一个对象的属性添加到作用域链的顶部，让我们在代码块内直接访问对象的属性。

with (对象) {
  // 在这里可以直接访问对象的属性
}

在 Vue 模板中我们写 {{message}}，实际上访问的是 this.message。使用 with(this) 可以省略 this. 前缀，让生成的代码更简洁。

示例：

function foo() {
  let name = 'other' // 局部变量
  let obj = {
    name: 'cookie', // 对象属性
  }
  with (obj) {
    console.log(name) // 优先从 obj 中查找，输出 'cookie'
  }
}
foo() // 输出: cookie

generate 生成代码

终于到了模板编译的最后一步，生成代码！在这一步，我们将根据前面得到的 AST 生成 render 函数。

1、整体入口：generate

generate 是代码生成的入口函数，负责将 AST 转换为可执行的渲染代码：

1. 递归生成代码：调用 genElement 遍历 AST，生成类似 _c('div', [...]) 的代码字符串
2. 包装 with 作用域：用 with(this){} 包裹，让代码能访问 Vue 实例的属性
3. 收集静态渲染函数：将静态根节点单独提取到 staticRenderFns 数组中

/**
 * 代码生成器入口
 * @param {Object} ast - 经过 parse 和 optimize 处理后的抽象语法树
 * @returns {Object} 返回包含 render 函数和 staticRenderFns 数组的对象
 */
function generate(ast) {
  // state 用于存储编译过程中的状态
  // staticRenderFns: 用于收集静态根节点的渲染函数，这些函数只需要生成一次，后续渲染可以直接复用，提升性能
  const state = { staticRenderFns: [] }

  // 递归生成核心渲染代码字符串
  // 例如：_c('div',[_v(_s(message))])
  const code = genElement(ast, state)

  return {
    // render: 主渲染函数的代码字符串
    // 使用 with(this) 包装后，模板中的变量（如 {{message}}）能直接从 Vue 实例上获取
    // with(this) 会将 Vue 实例添加到作用域链顶部
    // 这样 message 会自动从 this.message 获取，而不需要在模板里写 this.message
    render: `with(this){return ${code}}`,
    // staticRenderFns: 静态根节点渲染函数的数组
    staticRenderFns: state.staticRenderFns,
  }
}

2、核心函数：genElement

genElement 是代码生成的调度中心，它根据节点类型来使用不同的处理函数。

/**
 * 生成元素的渲染代码
 * @param {Object} el - AST 元素节点
 * @param {Object} state - 渲染状态，包含 staticRenderFns 数组
 * @returns {string} 渲染代码字符串，如：_c('div', [...])
 */
function genElement(el, state) {
  // 1：处理静态根节点
  // el.staticRoot: 在 optimize 阶段标记的静态根节点
  // el.staticProcessed: 防止重复处理的标记
  if (el.staticRoot && !el.staticProcessed) {
    // 静态根节点会被提升为单独的函数存储在 staticRenderFns 中
    // 返回类似 _m(0) 的代码，0 是在 staticRenderFns 数组中的索引
    return genStatic(el, state)
  }
  // 2：处理 v-for 指令
  // el.for: 在 parse 阶段解析的 v-for 属性
  // el.forProcessed: 防止递归时重复处理
  else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  }
  // 3：处理 v-if 指令
  // el.if: 在 parse 阶段解析的 v-if 条件表达式
  // el.ifProcessed: 防止递归时重复处理
  else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  }
  // 4：处理普通元素
  else {
    // 生成标签名字符串，如 'div'
    const tag = `'${el.tag}'`

    // 递归生成所有子节点的代码
    // 返回类似 [_v("hello"), _c('span')] 的数组代码
    const children = genChildren(el, state)

    // 最终调用 _c (createElement) 创建 VNode
    // 生成代码示例：_c('div', [_v("hello")])
    // 如果没有子节点，生成：_c('div')
    return `_c(${tag}${children ? `,${children}` : ''})`
  }
}

处理子节点：genChildren 和 genNode

genElement 中调用了 genChildren 来遍历子节点，genChildren 内部又使用 genNode 来处理每一个子节点，

/**
 * 生成子节点数组的渲染代码
 * @param {Object} el - 父元素节点
 * @param {Object} state - 渲染状态
 * @returns {string} 子节点数组代码，如：[_v("text"), _c('span')]
 */
function genChildren(el, state) {
  const children = el.children
  if (children.length) {
    // 获取子节点数组需要的规范化类型
    const normalizationType = getNormalizationType(children)
    // 遍历所有子节点，为每个子节点生成代码
    return `[${children.map((c) => genNode(c, state)).join(',')}]${
      normalizationType ? `,${normalizationType}` : ''
    }`
  }
}

/**
 * 根据节点类型调用对应的生成函数
 * @param {Object} node - AST 节点
 * @param {Object} state - 渲染状态
 * @returns {string} 节点渲染代码
 */
function genNode(node, state) {
  if (node.type === 1) {
    // type === 1: 元素节点，递归调用 genElement
    return genElement(node, state)
  } else {
    // type === 2/3: 文本节点或表达式节点，调用 genText
    return genText(node)
  }
}

为什么需要 getNormalizationType？

因为 v-for 会生成数组，导致 children 出现嵌套数组的情况：

<div>
  <span>first</span>
  <span v-for="item in [1,2,3]">{{item}}</span>
  <span>last</span>
</div>

生成的子节点结构会是：

[span_first, [span_1, span_1, span_1], span_last]

Vue 的 createElement 需要知道如何处理这种嵌套，所以要告诉它规范化类型：

• 不需要规范化（没有嵌套）- type = 0
• 简单规范化（一层嵌套，如组件）- type = 1
• 完全规范化（多层嵌套，如 v-for）- type = 2

/**
 * 确定子节点数组需要的规范化(normalization)类型
 * @param {Array} children - 子节点数组
 * @returns {number} 0 | 1 | 2 - 规范化类型
 */
function getNormalizationType(children) {
  let res = 0 // 默认不需要规范化

  // 遍历所有子节点，检测是否需要规范化
  for (let i = 0; i < children.length; i++) {
    const el = children[i]

    // 跳过非元素节点（type=2 表达式节点、type=3 文本节点）
    // 只有元素节点(type=1)才可能需要规范化处理
    if (el.type !== 1) continue

    // 检查是否需要完全规范化（优先级最高，返回 2）
    if (
      el.for !== undefined || // 当前节点有 v-for
      (el.ifConditions && // 或者 v-if 条件分支中有v-for
        el.ifConditions.some((c) => c.block.for !== undefined))
    ) {
      // 需要完全规范化：因为 v-for 会返回数组，需要递归扁平化
      // 例如：[_v(" "), _l(arr, ...), _v(" ")] 其中 _l 返回 [span1, span2, span3]
      // 实际结构是：[_v(" "), [span1, span2, span3], _v(" ")] 需要扁平化为一维数组
      res = 2
      break // 找到一个需要完全规范化的就可以退出，不需要继续检查
    }

    // 检查是否需要简单规范化 返回 1
    // 当前节点可能是组件时，组件可能返回多个根节点（数组）
    // 但组件的 render 函数已经返回规范化的 VNode，所以只需要一层扁平化
    // 我们的模板里不处理组件，这里也就不用考虑这种情况
    // res = 1
  }

  return res // 返回 0、1 或 2
}

3、分类处理函数

Vue 内部函数

首先在 Vue 内部，有一些简写函数，在后续生成代码的时候会用到，列表如下：

缩写	全称	作用	示例
_c	createElement	创建元素 VNode	_c('div', [...])
_v	createTextVNode	创建文本 VNode	_v("hello")
_s	toString	将变量转为字符串	_v(_s(message))
_l	renderList	渲染列表（v-for）	_l(items, fn)
_m	renderStatic	渲染静态内容	_m(0)
_e	createEmptyVNode	创建空节点（v-if 失败时）	_e()

静态节点 (genStatic)

静态根节点会被提升为单独的函数，提升性能：

/**
 * 生成静态根节点的渲染代码
 * @param {Object} el - 静态根节点
 * @param {Object} state - 渲染状态
 * @returns {string} 静态节点引用代码，如：_m(0)
 */
function genStatic(el, state) {
  // 标记已处理，防止重复处理
  el.staticProcessed = true

  // 递归生成静态节点的完整代码
  const code = genElement(el, state)

  // 将静态节点函数存储到 staticRenderFns 数组中
  state.staticRenderFns.push(`with(this){return ${code}}`)

  // 返回对静态函数的引用，_m(index) 表示调用 staticRenderFns[index]
  // 索引是当前数组长度减 1
  return `_m(${state.staticRenderFns.length - 1})`
}

静态渲染函数和主 render 函数（vm._render）独立，需要单独设置 with 作用域。

文本处理 (genText)

/**
 * 生成文本节点的渲染代码
 * @param {Object} text - 文本 AST 节点
 * @returns {string} _v('...') 或 _v(_s(variable))
 */
function genText(text) {
  // type 2 是带 {{}} 的表达式，type 3 是普通纯文本
  // 表达式直接使用解析好的 expression 纯文本需要用 JSON.stringify 转义
  // 比如 text 为 "hello"：生成代码 `v(hello)` 此时 JS 会去找名为 hello 的变量，这会导致报错（ReferenceError）
  // JSON.stringify("hello") 会返回 "\"hello\""（即带双引号的字符串）。生成的代码会变成：_v("hello")
  const value = text.type === 2 ? text.expression : JSON.stringify(text.text)
  return `_v(${value})`
}

条件渲染 (v-if)

在 Vue 中我们可以使用 v-if/else-if/else 指令，比如下面的模板：

<div v-if="a">A</div>
<div v-else-if="b">B</div>
<div v-else>C</div>

我们生成的 AST 为：

conditions = [
  { exp: 'a', block: { AST节点A } }, // v-if
  { exp: 'b', block: { AST节点B } }, // v-else-if
  { exp: undefined, block: { AST节点C } }, // v-else (没有exp)
]

v-if/else-if/else 的本质就是多重条件判断，在 JavaScript 中最适合用嵌套三元表达式来表达：

// 目标：生成这样的代码
// (a) ? A节点 : (b) ? B节点 : C节点
a ? _c('div', 'A') : b ? _c('div', 'B') : _c('div', 'C')

接下来是代码实现，我们处理 conditions 时，每次弹出第一个条件块，如果为真，则展示当前模块，如果为假，则递归处理剩余的 conditions，如果没有条件（v-else），则直接展示该模块。

/**
 * 生成 v-if 指令的入口函数
 * @param {Object} el - 带有 v-if 的 AST 节点
 * @param {Object} state - 渲染状态
 * @returns {string} 三元表达式形式的渲染代码
 */
function genIf(el, state) {
  // 标记已处理，防止递归时重复处理
  el.ifProcessed = true
  // 使用 slice() 复制数组，避免 shift() 修改原始的 ifConditions 数组
  return genIfConditions(el.ifConditions.slice(), state)
}

/**
 * 生成 v-if/else-if/else 指令的渲染代码
 * @param {Array} conditions - 条件数组
 * @param {Object} state - 渲染状态
 * @returns {string} 三元表达式形式的代码
 */
function genIfConditions(conditions, state) {
  // 递归终止条件：所有分支都处理完了 返回空节点
  if (!conditions.length) return '_e()'

  // 取出第一个条件
  const condition = conditions.shift()
  if (condition.exp) {
    // 有条件表达式：v-if 或 v-else-if
    // 生成：(条件) ? 满足时的内容 : 递归处理剩余条件
    return `(${condition.exp})?${genElement(
      condition.block,
      state
    )}:${genIfConditions(conditions, state)}`
  } else {
    // 没有条件表达式：v-else
    // 兜底分支，直接生成节点
    return genElement(condition.block, state)
  }
}

列表渲染 (v-for)

最后我们处理 v-for 指令，考虑下面的例子：

<div v-for="(item, index) in items">{{ item.name }}</div>

在 parse 阶段，这个指令会被解析为 AST 节点的属性：

{
  for: "items",      // 要遍历的数据源
  alias: "item",     // 当前项的别名
  iterator1: "index" // 索引的别名（可选）
}

我们通过_l 来进行遍历。_l 是 Vue 的内部函数 renderList，它的作用是遍历数组/对象，为每一项调用渲染函数。我们要生成的代码格式是：

_l(数据源, function (item, index) {
  return 每一项的渲染代码
})

代码实现：

/**
 * 生成 v-for 指令的渲染代码
 * @param {Object} el - 带有 v-for 的 AST 节点
 * @param {Object} state - 渲染状态
 * @returns {string} _l() 函数调用代码
 */
function genFor(el, state) {
  // 1. 提取遍历的相关信息
  const exp = el.for // 遍历的对象
  const alias = el.alias // 别名 item

  // 2. 处理索引参数（可选）
  // 如果有索引，格式为 ",index"；没有则为空字符串
  const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
  const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''

  // 3. 标记已处理，防止递归时重复处理
  el.forProcessed = true

  // 4. 生成 _l() 函数调用
  return `_l((${exp}),function(${alias}${iterator1}${iterator2}){return ${genElement(
    el,
    state
  )}})`
}

最后会转化为代码：

_l(items, function (item, index) {
  return _c('div', [_v(_s(item.name))])
})

运行实例

我们已经写完了模板编译代码，完整的使用流程如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    // 1. 模板字符串
    const template = `
      <div>
        <h1>恭喜！编译成功！</h1>
        <h1 v-if="true">随机数{{ Math.random() }}</h1>
        <h1 v-if="false">这里不会被展示</h1>
        <h2>
          <span>{{message}}</span>
          <span v-for="item in list">{{item}}</span>
        </h2>
      </div>
    `

    // 2. 三步编译：parse -> optimize -> generate
    // （函数实现见上文，这里省略）
    const ast = parse(template, {...})
    optimize(ast)
    const { render, staticRenderFns } = generate(ast)

    // 3. 使用生成的 render 函数创建 Vue 实例
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello',
        list: ['我不吃', '饼干', '🍪'],
      },
      render: new Function(render),
      staticRenderFns: staticRenderFns.map(fn => new Function(fn)),
    })
  </script>
</body>
</html>

最终页面展示效果如下：

后记

以前看大佬ssh_晨曦时梦见兮的文章，特别喜欢他那种把问题深入浅出讲明白的文章。可是当我自己开始写的时候，才发现想写好真的好难。

有任何问题都可以在评论区提出，感谢大家看到这里。