防Vue系列-05 怎么将VNode转换成真正的Dom

Vue解析总纲
上一节:防Vue系列-04 初步了解 virtual DOM
创建createElement函数 作用:将VNode转换成真正的Dom

  /*
 *@params tag:String  'div||span||h1'
 *@params data:Object '{id:'root,class:'theme'...}'
 *@params value:String 'nodeValue || undefined'
 *@params type:Number 'nodeType=1 || 2 ||3 '
 *@params children:Array<Vnode> 
 @return dom:HtmlElement 
 */
      function createElement(tag, data, value, type, children) {
        let dom;//定义储存dom变量
        // 元素节点
        if (type === 1) {
          //创建元素
          dom = document.createElement(tag);
          //添加属性
          for (const key in data) {
            if (data.hasOwnProperty.call(data, key)) {
              dom.setAttribute(key, data[key]);
            }
          }
          // 存在子节点遍历循环递归
          if (children) {
            for (let index = 0; index < children.length; index++) {
              let nodeTag = children[index].tag;
              let nodeData = children[index].data;
              let nodeValue = children[index].value;
              let nodeType = children[index].type;
              let nodeChildren = children[index].children;
              dom.appendChild(
                createElement(
                  nodeTag,
                  nodeData,
                  nodeValue,
                  nodeType,
                  nodeChildren
                )
              );
            }
          }
        } 
        // 文本节点，创建文本节点
        else if (type === 3) {
          dom = document.createTextNode(value);
        }
        return dom;
      }

• 创建paraseVnode解析函数返回真实的dom

/*
 *@params vnode:Object
 @return dom:HtmlElement 
 */
      function paraseVnode(vnode) {
        return createElement(
          vnode.tag,
          vnode.data,
          vnode.value,
          vnode.type,
          vnode.children
        );
      }