虚拟DOM转换为真实DOM 初始化与更新时的转换原理

虚拟DOM转换为真实DOM 初始化与更新时的转换原理

// 虚拟dom转化为真实dom初始化加载原理（大致流程）
// 虚拟dom 生成的三要素 目标元素、目标元素属性、目标元素子元素
function createrElement(vonde){
    let tag = vonde.tag //目标元素
    let attrs = vonde.attrs//目标元素属性
    let children = vonde.children //标元素子元素
    if(!tag){ // 如果没有目标元素什么操作都不做
        return null
    }
    let elem=document.createElement(tag)
    let attrName
    // 给dom 添加属性
    for(attrName in attrs){
        if(attrs.hasOwnproperty(attrName)){//判断如果有属性则给目标元素添加
            elem.setAttribute(attrName,attrs[attrName])
        }
    }
    //将子元素添加到目标之上
    children.forEach(childVnode => {
        elem.appendChild(createrElement(childVnode))
    });
    return elem
}


// 虚拟dom转化为真实dom更新加载原理（大致流程）
function updateChildren(vnode,newVnode){
 let children = vnode.children || [] //现有节点
 let newChildren = newVnode.children || [] //新节点
 children.forEach((childrenVnode,index)=>{
    // 循环每一项
    let newChildrenVnode = newChildren[index] //通过index将新老节点进行对照
    if(newChildrenVnode.tag===newChildren.tag){
        updateChildren(childrenVnode,newChildrenVnode)//如果第一层没有变化再次递归对照
    }else{
        replaceNode(childrenVnode,newChildrenVnode)
    }
 })
}