浅浅的来模拟实现虚拟dom

虚拟dom的三要素

• 目标元素
• class类
• children元素

  // 虚拟dom首次
    function createElement(vnode){
         let tag = vnode.tag
         let attr = vnode.attr || {}
         let children = vnode.children ||[]
         if(!tag){
          return false   
          }
          let ele = document.creatElement(tag)
          //生命class的名字
          let attrName
          for(var i = 0; i<attr.length;i++){
            if(attrName.hasOwnProperty(attrs){
                ele.setAttribute(attrName,attr[attrName]
            }
          }
          children.forEach((childrennode)=>{
              ele.appendchild(createElement(children))
          })
    }

以上为虚拟dom首次的渲染为真实dom的过程，接下来来用代码描述一下dom更新以后的过程

        function updateElement(oldNode,newNode){
          let oldchidren = oldNode.children
          let newchildren = newNode.children
          oldchildren.foreach((oldchildrenNode,index)=>{
           let newchildrenNode = newchildren[index]
           if(newchildrenNode===oldchildrenNode）{
              updateElement(oldchildrenNode,newchildrenNode)
               } else{
               replace(oldchildrenNode,newchildrenNode)
               } 
          })
        }