Vue3 源码学习，实现一个 mini-vue（七）：构建 renderer 渲染器之 ELEMENT 节点的挂载

ELEMENT 节点的挂载

在上一章中，我们成功构建了 h 函数创建 VNode。本章的目标就是要在 VNode 的基础上构建 renderer 渲染器。

根据上一章的，我们知道在 packager 工具的编译下，template 模板最终会被编译成 render 函数，而 render 函数最终会返回一个 VNode。

而渲染器要做的，就是根据 VNode 创建出真实 DOM 元素，并将其插入到父节点中。

ELEMENT 节点的挂载是最基本的一种挂载方式，也是最常见的一种挂载方式。ELEMENT 节点，顾名思义，就是普通的 HTML 元素节点，比如<div>、<p>、<span>等。

ELEMENT 节点的挂载过程主要分为以下几个步骤：

1. 创建真实 DOM 元素
2. 设置真实 DOM 元素的属性
3. 将真实 DOM 元素插入到父节点中

下面，我们就来详细讲解一下这几个步骤。

创建真实 DOM 元素

创建真实 DOM 元素，顾名思义，就是使用 JavaScript 代码创建一个 DOM 元素。

在 JavaScript 中，我们可以使用 document.createElement() 方法来创建一个 DOM 元素。

const div = document.createElement('div');

这样，我们就创建了一个<div>元素。

设置真实 DOM 元素的属性

设置真实 DOM 元素的属性，顾名思义，就是将 VNode 中的属性设置到真实 DOM 元素上。

在 VNode 中，属性是以键值对的形式存储的。

const vnode = {
  tag: 'div',
  attrs: {
    id: 'app',
    class: 'container'
  }
};

在真实 DOM 元素上，属性也是以键值对的形式存储的。

const div = document.createElement('div');
div.id = 'app';
div.classList.add('container');

这样，我们就将 VNode 中的属性设置到了真实 DOM 元素上。

将真实 DOM 元素插入到父节点中

将真实 DOM 元素插入到父节点中，顾名思义，就是将真实 DOM 元素添加到父节点的子节点列表中。

在 JavaScript 中，我们可以使用 parentNode.appendChild() 方法将子节点添加到父节点的子节点列表中。

const parent = document.getElementById('root');
parent.appendChild(div);

这样，我们就将真实 DOM 元素插入到了父节点中。

结语

至此，我们就完成了 ELEMENT 节点的挂载过程。