在这一节我们主要学习简单的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));
}