解释 Vue 3 编译器如何处理 “ 中的注释节点和文本节点，并将其转换为 VNode。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同学，早上好！（或者下午好，晚上好，甚至凌晨好，只要你觉得这个时间听课合适就行！）。今天我们要深入挖掘 Vue 3 编译器内部的秘密，特别是它如何像一位魔术师一样，将 <template> 中的注释节点和文本节点变戏法般地转换成 VNode。准备好了吗？我们要开始解剖 Vue 3 的心脏啦！

第一幕：<template> 里的日常——注释和文本节点

首先，让我们明确一下舞台上的角色。在 Vue 组件的 <template> 中，除了那些光鲜亮丽的 HTML 标签和组件之外，还存在着一些“沉默的大多数”：注释和文本节点。

注释： 就是那些被  包裹起来的文字。它们通常是开发者的备忘录，对浏览器来说是透明的，不会被渲染到页面上。
文本节点： 就是那些裸露的文字，没有被任何 HTML 标签包裹。它们可能包含静态文本，也可能包含 Vue 的动态表达式，比如 {{ message }}。

第二幕：编译器的“扫描”与“解析”

当 Vue 编译器拿到你的 <template> 时，它会像一个勤劳的清洁工一样，先进行“扫描”，然后进行“解析”。

扫描 (Lexical Analysis)： 编译器会像读报纸一样，从头到尾逐字逐句地扫描你的 <template> 代码。它会把代码分解成一个个的“token”（令牌），比如 HTML 标签、属性、文本、注释等等。
解析 (Parsing)： 扫描之后，编译器会像侦探一样，分析这些 token 之间的关系，建立起一个抽象语法树 (Abstract Syntax Tree, AST)。AST 就像一棵倒过来的树，树根是整个模板，树枝和树叶则是模板中的各种节点。

第三幕：VNode 的诞生——注释节点和文本节点的特殊待遇

现在，重头戏来了！编译器如何把 AST 中的注释节点和文本节点转换成 VNode 呢？

注释节点 VNode： Vue 3 对注释节点的处理相当简单粗暴，但也非常高效。它会创建一个 Comment 类型的 VNode。这种 VNode 不会参与到实际的 DOM 渲染中，但它保留了注释的内容，方便在开发和调试时查看。

让我们来看一段代码：
```
<template>
  <div>
    
    Hello, Vue!
  </div>
</template>
```
在编译过程中， 会被转换成一个如下形式的 VNode：
```
{
  type: Symbol(Comment), // Vue 内部用 Symbol(Comment) 表示注释类型
  props: null,
  children: " 这是一个注释 ",
  el: null, // 初始时，el 为 null，渲染后指向实际的 DOM 节点
}
```
注意，type 属性是一个 Symbol(Comment)，这表明这是一个注释节点。children 属性则包含了注释的内容。
文本节点 VNode： 文本节点的处理稍微复杂一些，因为文本节点可能包含动态表达式。
- 静态文本： 如果文本节点只包含静态文本，那么编译器会创建一个 Text 类型的 VNode。
- 动态文本： 如果文本节点包含动态表达式（比如 {{ message }}），那么编译器会使用 createVNode 函数创建一个 Text 类型的 VNode，并且会把表达式编译成一个求值函数。在渲染时，这个求值函数会被调用，然后把结果插入到文本节点中。
让我们来看几个例子：

例子 1：静态文本
```
<template>
  <div>
    Hello, Vue!
  </div>
</template>
```
Hello, Vue! 会被转换成一个如下形式的 VNode：
```
{
  type: Symbol(Text), // Vue 内部用 Symbol(Text) 表示文本类型
  props: null,
  children: "Hello, Vue!",
  el: null,
}
```
例子 2：动态文本
```
<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue!');
</script>
```
{{ message }} 会被转换成一个如下形式的 VNode：
```
{
  type: Symbol(Text),
  props: null,
  children: () => message.value, //  注意这里是一个函数
  el: null,
}
```
注意，children 属性是一个函数，而不是一个字符串。这个函数会在渲染时被调用，并且返回 message.value 的值。

例子 3：混合文本和动态表达式
```
<template>
  <div>
    Hello, {{ name }}! Welcome to {{ city }}.
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Alice');
const city = ref('Wonderland');
</script>
```
这个例子稍微复杂一点。编译器会把这个文本节点分解成多个 VNode，然后把它们组合起来。大致的结构如下：
```
[
  {
    type: Symbol(Text),
    props: null,
    children: "Hello, ",
    el: null,
  },
  {
    type: Symbol(Text),
    props: null,
    children: () => name.value,
    el: null,
  },
  {
    type: Symbol(Text),
    props: null,
    children: "! Welcome to ",
    el: null,
  },
  {
    type: Symbol(Text),
    props: null,
    children: () => city.value,
    el: null,
  },
  {
    type: Symbol(Text),
    props: null,
    children: ".",
    el: null,
  },
]
```
可以看到，编译器把静态文本和动态表达式分别转换成不同的 VNode，然后按照它们在模板中的顺序排列起来。

第四幕：VNode 的“复活”——DOM 渲染

现在，VNode 已经准备好了。接下来，Vue 的渲染器会像一位建筑师一样，根据 VNode 的描述，创建真实的 DOM 节点，并且把它们插入到页面中。

注释节点： 渲染器会创建一个 Comment 类型的 DOM 节点，并且把 VNode 的 children 属性设置为 DOM 节点的文本内容。不过，正如我们之前提到的，注释节点通常不会参与到实际的 DOM 渲染中，所以它们对页面的显示没有影响。
文本节点： 渲染器会创建一个 Text 类型的 DOM 节点，并且把 VNode 的 children 属性设置为 DOM 节点的文本内容。如果 children 属性是一个函数，那么渲染器会先调用这个函数，然后把返回的结果设置为 DOM 节点的文本内容。

让我们回到之前的例子：
```
<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue!');
</script>
```
当渲染器遇到这个文本节点 VNode 时，它会先调用 children 属性指向的函数：
```
() => message.value
```
这个函数会返回 message.value 的值，也就是 "Hello, Vue!"。然后，渲染器会创建一个 Text 类型的 DOM 节点，并且把 "Hello, Vue!" 设置为 DOM 节点的文本内容。最终，这个文本节点就会显示在页面上。

第五幕：性能优化——静态提升 (Static Hoisting)

为了提高渲染性能，Vue 3 编译器还做了一些优化，比如“静态提升”。如果一个 VNode 是静态的，也就是说它的内容不会发生变化，那么编译器会把这个 VNode 提升到渲染函数之外，避免每次渲染都重新创建它。

举个例子：

<template>
  <div>
    <p>This is a static text.</p>
    <p>{{ dynamicText }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const dynamicText = ref("This is dynamic");
</script>

在这个例子中，<p>This is a static text.</p> 是一个静态的 VNode，它的内容不会发生变化。因此，编译器会把它提升到渲染函数之外，只创建一次。而 <p>{{ dynamicText }}</p> 是一个动态的 VNode，它的内容会随着 dynamicText 的变化而变化，所以不能被提升。

第六幕：总结与思考

好了，今天的讲座就到这里。我们一起探索了 Vue 3 编译器如何处理 <template> 中的注释节点和文本节点，并且把它们转换成 VNode。

下面是一个表格，总结了注释节点和文本节点 VNode 的特点：

节点类型	`type` 属性	`children` 属性	是否参与 DOM 渲染	是否可以静态提升
注释节点	`Symbol(Comment)`	注释内容（字符串）	否	是
静态文本节点	`Symbol(Text)`	静态文本（字符串）	是	是
动态文本节点	`Symbol(Text)`	求值函数（返回动态文本的字符串）	是	否

通过今天的学习，我们对 Vue 3 的编译器有了更深入的了解。希望这些知识能帮助你更好地理解 Vue 的工作原理，并且写出更高效、更优雅的 Vue 代码。

最后，留给大家一个思考题：Vue 3 中，如何处理包含 HTML 标签的文本节点？例如：<div>Hello, <b>Vue</b>!</div>。提示：这涉及到 fragment 的概念。

下次再见！

发表回复 取消回复

发表回复取消回复