vue中的patch方法和update方法大概流程

40 阅读1分钟

patch方法: (vue中)

//patch方法
Function createElement(vnode){
    let tag = vnode.tag. // 目标元素
    let attires = vnode.attrs || {}    // 属性
    let children = vnode.children || []     // 子节点

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

    //3. 将子元素添加到目标元素之上
    children.forEach(function(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(chidrenVnode.tag === newChildrenVnode.tag){
        // 深层次对比-递归
        updateChildren(childrenVnode, newChildrenVnode)
        } else {
        // 两者tag 不一样
        replaceNode(childrenVnode, newChildrenVnode)
        }
    })
}