虚拟DOM (virtual DOM)

// patch 对比新旧节点（vnode、newVnode）
    function updateChildren(vnode,newVnode){
        var children=vnode.children||[];
        var newChildren=newVnode.children||[];
        children.forEach(function(childVnode,index){
            var newChildVnode=newChildren[index];
            if(childVnode.tag==newChildren.tag){
                //深层递归
                updateChildren(childVnode,newChildVnode)
            }else{
                //不一样则更新
                replaceNode(childVnode,newChildVnode)
            }
        });
    }


    //将Vnode渲染成真正的dom
    function createElement(vnode){
        var tag=vnode.tag;
        var attrs=vnode.attrs || {};
        var children=vnode.children || [];
        if(!tag)return null;
        //创建真实的dom元素
        var elem=document.createElement(tag);
        //属性
        var attrName
        for(attrName in attrs){if(attrs.hasOwnProperty(attrName)){
            //添加属性
            elem.setAttribute(attrName,attrs[attrs])
        }
        //子元素
        children.forEach(function(childVnode){
            //给elem添加子元素，若还有子节点，则递归生成子节点
            elem.appendChild(createElement(childVnode))
        });

        }
        //返回真实的dom元素
        return elem;
    }