vue 虚拟dom

vnode => dom虚拟 => 真是dom (vue 初始化渲染)

# 创建节点
function createElement(vnode){
  //目标对象 ul div
  let tag = vnode.tag;
  let attrs = vnode.attrs || {};
  let children = vnode.children || {};

  if(!tag) return null;
  let elem = document.createElement(tag);
  let attrName
  for(attrName in attrs){
    if(attrs.hasOwnProperty(attrName)){
      //给ele添加属性
      elem.setAttribute(attrName,attrs[attrName])
    }
  }
  //添加子元素
  children.forEach(childVnode => {
    //递归添加
    elem.appendChild(createElement(childVnode))
  });
  return elem;
}

更新节点

function upateChildren(vnode,newVnode){
  let children = vnode.childVnode || [];
  let newChildren = newVnode.children || [];

  children.forEach((childVnode,index)=>{
    let newChildVnode = newChildren[index];
    if(childVnode.tag === newChildVnode.tag){
      // 深层次对比 递归
      upateChildren(childVnode,newChildVnode)
    }else{
      replaceNode(childVnode,newChildVnode)
    }
  })
}

function replaceNode(){
  //......
}