Vue.js 内部运行机制 (三) ---- Virtual DOM 的实现

在这一节我们主要学习简单的Virtual Dom的实现

VNode类

VNode 归根结底就是一个 JavaScript 对象，只是通过类的属性可以正确直观地知道当前节点的信息即可。这是最简单的实现。

/** 
 * virtual node生成类
 * 去除复杂的情况
 */
class VNode {
    constructor(tag, data, children, text, elm) {
        /* 当前标签名 */
        this.tag = tag;
        /* 当前节点的信息，如props、attrs、v-指令等数据 */
        this.data = data;
        /* 当前节点的子节点， [数组] */
        this.children = children;
        /* 当前节点的文本 */
        this.text = text;
        /* 当前虚拟节点对应的真实dom */
        this.elm = elm;
    }
}

创建空节点

function createEmptyVNode () {
    const node = new VNode();
    node.text = '';
    return node;
}

克隆节点

function cloneVNode (node) {
    const cloneVnode = new VNode(
        node.tag,
        node.data,
        node.children,
        node.text,
        node.elm
    );
    return cloneVnode;
}

创建文本节点

function createTextVNode (val) {
  return new VNode(undefined, undefined, undefined, String(val));
}

参考文章

《Vue的内部运行机制》

代码参考《实现 Virtual DOM 下的一个 VNode 节点》