vue中的 patch的方法

1、初始化 patch(container,vnode)
2、更新 update(vnode,newVode)

// patch的方法

//初始化 patch(container,vnode)
// 更新 update(vnode,newVode)

function createElement(vnode){
    // 虚拟dom生成有3个要素
    // tag 目标元素
    let tag=vnode.tag;  //目标元素
    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(attrs.hasOwnProperty(attrName)){

            elem.setAttribute(attrName,attrs[attrName]);
        }
    }

    // 3.将子元素添加在目标元素上。
    children.forEach(childVnode => {
        elem.appendChild(createElement(childVnode));
    });


    return elem;
}


// 更新

function updateChildren(vnode,newVnode){
    let children=vnode.children || [];  // 现有节点
    let newChildren=newVnode.children || [];  // 新节点

    children.forEach(function(childrenVnode,index){

        // 循环的每一项
        let newChildrenVnode=newChildren[index];
        if(childrenVnode.tag===newChildrenVnode.tag){

            // 深层次通过递归进行比较
            updateChildren(childrenVnode,newChildrenVnode);
        }else{
            // 两者tag不一样
            replaceNode(childrenVnode,newChildrenVnode);
        }
    })
}