Vue 解析器：深度解析模板编译过程

2023-11-13 13:38:08

在前面的学习中，我们知道，Vue 的模板编译，分为解析器、优化器、代码生成器三个模块依次来实现。今天，我们先来深入了解一下解析器。

解析器，就是把<template></template>模板，根据一定的规则，解析成抽象语法树（AST）。抽象语法树是一种树形数据结构，它可以将模板中的各个元素及其之间的关系表示出来。

Vue 的解析器是如何工作的呢？我们先来看一下解析器是如何解析一个简单的模板的：

<div id="app">
  <h1>{{ message }}</h1>
</div>

首先，解析器会将这个模板字符串解析成一个标记列表。标记列表是一个包含了所有标记的数组，每个标记都包含了标记的类型、名称、属性和内容等信息。

[
  {
    type: 'start',
    name: 'div',
    attrs: [
      {
        name: 'id',
        value: 'app'
      }
    ],
    children: [
      {
        type: 'text',
        content: ' '
      },
      {
        type: 'start',
        name: 'h1',
        attrs: [],
        children: [
          {
            type: 'interpolation',
            content: '{{ message }}'
          }
        ]
      },
      {
        type: 'text',
        content: ' '
      }
    ]
  },
  {
    type: 'end',
    name: 'div'
  }
]

然后，解析器会根据标记列表构建抽象语法树。抽象语法树是一个树形数据结构，它可以将模板中的各个元素及其之间的关系表示出来。

{
  type: 'root',
  children: [
    {
      type: 'element',
      name: 'div',
      attrs: [
        {
          name: 'id',
          value: 'app'
        }
      ],
      children: [
        {
          type: 'text',
          content: ' '
        },
        {
          type: 'element',
          name: 'h1',
          attrs: [],
          children: [
            {
              type: 'interpolation',
              content: '{{ message }}'
            }
          ]
        },
        {
          type: 'text',
          content: ' '
        }
      ]
    }
  ]
}

最后，解析器会根据抽象语法树生成渲染函数。渲染函数是一个 JavaScript 函数，它可以将模板中的数据渲染到 DOM 中。

function render(_context, _cache, $props, $setup, $data, $options) {
  const _component_VNode = Vue.createVNode("div", {
    id: "app"
  }, [
    Vue.createVNode("h1", null, [
      Vue.createVNode("span", null, [
        Vue.createVNode(Vue.Text, null, " " + Vue.toDisplayString($data.message) + " ", null)
      ], null, 8 /* TEXT | PROPS */)
    ], null, 16 /* FULL_PROPS */)
  ], null, 16 /* FULL_PROPS */)
  return _component_VNode
}