// vue的渲染有两条线 （vue是怎么样将虚拟dom转化为真实dom的）
// 1.初始化 patch(container,vnode)
// 2.更新 update(vnode,newVnode)

function createElement(vnode) {
  // 虚拟dom组成的三要素
  let tag = vnode.tag; // 目标元素 ul
  let attrs = vnode.attrs || {}; // 属性
  let children = vnode.children || []; // 子节点

  if (!tag) {
    return null;
  }
  // 1.创建对应的dom
  let elem = document.createElement(tag);
  let attrName;
  // 2.给dom添加属性
  for (attrName in attrs) {
    if (attrName.hasOwnProperty(attrName)) {
      elem.setAttribute(attrName, attrs[attrName]);
    }
  }

  // 3。将子元素添加到目标之上
  children.forEach(function (childVnode) {
    elem.appendChild(createElement(childVnode));
  });
  return elem;
}

function updateChildren(vnode, newVnode) {
  let children = vnode.childVnode || []; // 现有节点
  let newChildren = newVnode.children || []; // 新节点
  children.forEach(function (childVnode, index) {
    // 循环的每一项
    let newChildrenVnode = newChildren[index];
    // 第一层没有变化
    if (childVnode.tag === newChildrenVnode.tag) {
        // 深层次对比==>递归
      updateChildren(childVnode, newChildrenVnode);
    } else {
      // 两者tag不一样，替换tag
      replaceNode(childVnode, newChildrenVnode);
    }
  });
}