SOURCE

//1.虚拟dom是什么？
//a.vue2.x才有；b.本质是JS对象
//2.虚拟dom在vue中做了什么？
//a.vue的渲染过程（html,css,js）
//b.1.将真实dom转化为虚拟dom(js对象)2.更新时做对比
//3.虚拟dom是如何提升vue的渲染效率的？
//1.局部更新（节点数据）
//2.直接将操作dom的地方拿到两个js对象之中去做对比
//具体如下
//1.第一次渲染，经过patch(container,vnode)初始化生成vnode
//2.更新update(vnode,newVnode)

//将vnode渲染成真实dom(即 h())
function createEelment (vnode){
    const tag = vnode.tag //目标元素
    const attrs = vnode.attrs ||{} //目标属性
    const children = vnode.children ||[] //子节点
    if(!tag){
        return null
    }
    const elm = document.createElement(tag)
    let attrName
    for(attrName in attrs){
        if(attrs.hasOwnProperty(attrName)){
            elm.setAttribute(attrName,attrs[attrName])
        }
    }
    children.forEach(item =>{
        elm.appendChild(createEelment(item))
    })
    return elm
}

//
function patch (obj){
    if(typeof obj === "object"){

    }
}
//更新子节点函数
function updateChild(vnode,newVnode){
    const child = vnode.children || []
    const newChild= newVnode.children || []
    //循环判断每一层
    child.forEach((childVnode,index) =>{
         const newChildVnode =  newChild[index]
        if(childVnode.tag === newChildVnode.tag){
            //标签一致则
        }else{
            replaceNode(childVnode,newChildVnode)
        }
    })
}