面试题：Vue 中 template 的编译过程是怎样的？

Vue 中的 template 编译过程是将模板字符串转换为渲染函数（render function）的过程。这个过程主要包括以下几个步骤：

1. 模板编译的整体流程

Vue 的模板编译过程可以分为三个阶段：

解析（Parse）：将模板字符串解析为抽象语法树（AST）。
优化（Optimize）：对 AST 进行静态标记，优化渲染性能。
生成（Generate）：将 AST 转换为渲染函数。

2. 详细步骤

阶段 1：解析（Parse）

将模板字符串解析为抽象语法树（AST）。AST 是一个树形结构，用于描述模板的语法结构。

解析过程：

使用正则表达式和状态机将模板字符串解析为一个个 Token。
根据 Token 构建 AST 节点，最终生成完整的 AST。

示例：

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

解析后的 AST：

{
  type: 1, // 节点类型：1-元素节点，2-文本节点，3-插值节点
  tag: 'div',
  attrsList: [{ name: 'id', value: 'app' }],
  children: [
    {
      type: 1,
      tag: 'p',
      children: [
        {
          type: 2, // 文本节点
          expression: '_s(message)', // 表达式
          text: '{{ message }}',
        },
      ],
    },
  ],
}

说明：

AST 节点包含节点的类型、标签、属性、子节点等信息。
插值表达式（如 {{ message }}）会被解析为文本节点，并生成对应的表达式。

阶段 2：优化（Optimize）

对 AST 进行静态标记，优化渲染性能。

优化过程：

遍历 AST，标记静态节点（即不会变化的节点）。
静态节点在后续渲染过程中可以直接复用，无需重新渲染。

示例：

{
  type: 1,
  tag: 'div',
  static: false, // 动态节点
  children: [
    {
      type: 1,
      tag: 'p',
      static: true, // 静态节点
      children: [
        {
          type: 2,
          static: false, // 动态节点
          expression: '_s(message)',
          text: '{{ message }}',
        },
      ],
    },
  ],
}

说明：

静态节点会被标记为 static: true，在后续渲染过程中可以直接复用。
动态节点会被标记为 static: false，在每次渲染时都需要重新计算。

阶段 3：生成（Generate）

将 AST 转换为渲染函数。

生成过程：

遍历 AST，生成渲染函数的代码字符串。
渲染函数是一个 JavaScript 函数，返回虚拟 DOM（VNode）。

示例：

function render() {
  return _c('div', { attrs: { id: 'app' } }, [
    _c('p', [_v(_s(message))]),
  ]);
}

说明：

_c：创建元素节点。
_v：创建文本节点。
_s：将值转换为字符串。

3. 编译结果的使用

编译生成的渲染函数会被挂载到组件的 render 选项上。在组件渲染时，Vue 会调用 render 函数生成虚拟 DOM，并将其转换为真实 DOM。

示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
  render(h) {
    return h('div', { attrs: { id: 'app' } }, [
      h('p', this.message),
    ]);
  },
});

说明：