仿写Vue（四）、虚拟节点

四、虚拟节点

自己动手实践，就会更加深刻的理解

在前面，已经解决了属性的深层次渲染，接下来需要解决虚拟节点的问题——即将DOM转换为vnode。

01、虚拟节点

---

简单起见，简单起见，对于一个虚拟节点，有这么些属性：

1. tag：表示节点的标签名

2. data：表示节点的属性

3. text：表示文本节点的文本（不为文本节点时，为undefined）

4. type：节点的类型

5. children：子节点

/**
 * 虚拟节点
 */
class MyVNode {
   
  /**
   * 构造函数
   * @param {string} tag 标签名
   * @param {object} data 标签拥有的属性
   * @param {string} text 文本节点中的文本（非文本节点则为undefined）
   * @param {number} type 1代表元素节点，3代表文本节点
   */
  constructor(tag, data, text, type) {
   
    this.tag = tag && tag.toLowerCase();
    this.data = data;
    this.text = text;
    this.type = type;
    this.children = [];
  }
  /**
   * 添加子节点
   */
  appendChild(vnode) {
   
    this.children.push(vnode);
  }
}