关于前端:Vue2-双端比较diff算法patchVNode流程浅析

1次阅读

共计 14673 个字符，预计需要花费 37 分钟才能阅读完成。

用具体的例子解说 patchVNode 的具体流程，通过例子逐步剖析出 patchVNode 代码所代表的含意

由上一篇文章 Vue2 源码 - 整体流程浅析能够晓得，当两个 VNode 是同一个 VNode 时，会触发 patchVNode()的执行

function patchVnode(oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
    //...
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {i(oldVnode, vnode)
    }
    //...
}

从上面代码能够晓得，prepatch()次要是调用了 updateChildComponent()，这个办法的作用是将newVnode 相干数据更新到旧的oldVnode.componentOptions

// vue/src/core/vdom/create-component.js
prepatch(oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions
    const child = vnode.componentInstance = oldVnode.componentInstance
    updateChildComponent(
        child,
        options.propsData, // updated props
        options.listeners, // updated listeners
        vnode, // new parent vnode
        options.children // new children
    )
}

// vue/src/core/instance/lifecycle.js
export function updateChildComponent(
    vm: Component, // 旧的 Component 对象
    propsData: ?Object, // 新的 props 数据
    listeners: ?Object, // 新的 listeners 数据
    parentVnode: MountedComponentVNode, // 新的 VNode 数据
    renderChildren: ?Array<VNode> // 新的 children 数据
) {
    vm.$options._parentVnode = parentVnode
    vm.$vnode = parentVnode // update vm's placeholder node without re-render

    if (vm._vnode) { // update child tree's parent
        vm._vnode.parent = parentVnode
    }
    vm.$options._renderChildren = renderChildren
    vm.$attrs = parentVnode.data.attrs || emptyObject
    vm.$listeners = listeners || emptyObject

    if (propsData && vm.$options.props) {toggleObserving(false)
        const props = vm._props
        const propKeys = vm.$options._propKeys || []
        for (let i = 0; i < propKeys.length; i++) {const key = propKeys[i]
            const propOptions: any = vm.$options.props // wtf flow?
            props[key] = validateProp(key, propOptions, propsData, vm)
        }
        toggleObserving(true)
        vm.$options.propsData = propsData
    }
    //... 省略代码，根本跟下面代码逻辑统一，进行 vm 的更新而已
}

function patchVnode(oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
    //...
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {i(oldVnode, vnode)
    }


    if (isDef(data) && isPatchable(vnode)) {for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
        if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    }

    //...
}

参考 Vue2 自定义指令的钩子函数：https://v2.cn.vuejs.org/v2/guide/custom-directive.html#ad

从文档能够晓得，update()的钩子函数，代表所在组件的 VNode 更新时调用，然而可能产生在其子 VNode 更新之前 。指令的值可能产生了扭转，也可能没有。然而你能够通过比拟更新前后的值来疏忽不必要的模板更新
比方上面的示例代码，如果咱们注册了一个 test33 的自定义指令，那么 <div v-test33></div> 所在组件的 VNode 更新时调用注册的 update() 办法

// html
<template>
    <div v-test33></div>
</template>

// js
Vue.directive('test33', {update: function (el) {console.error("测试 update 自定义指令");
    }
})

function patchVnode(oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
    //...
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {i(oldVnode, vnode)
    }
    const oldCh = oldVnode.children
    const ch = vnode.children
    //...

    if (isUndef(vnode.text)) {if (isDef(oldCh) && isDef(ch)) {if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
        } else if (isDef(ch)) {if (process.env.NODE_ENV !== 'production') {checkDuplicateKeys(ch)
            }
            if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
            addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
        } else if (isDef(oldCh)) {removeVnodes(oldCh, 0, oldCh.length - 1)
        } else if (isDef(oldVnode.text)) {nodeOps.setTextContent(elm, '')
        }
    } else if (oldVnode.text !== vnode.text) {nodeOps.setTextContent(elm, vnode.text)
    }
}

从下面的代码能够晓得，当 prepatch() 将newVNode的相干数据更新到 oldVNode.componentOptions 后，会进行它们 children 的比拟，确定它们 children 的更新策略，总结下来为

oldVNodeChildren!==newVNodeChildren，触发 updateChildren() 办法
oldVNodeChildren 为空，newVNodeChildren 不为空，执行 newVNodeChildren 新建插入操作
oldVNodeChildren 不为空，newVNodeChildren 为空，执行 oldVNodeChildren 删除操作
如果是文本节点，则更新文本内容

因为流程过于简单，将应用一个具体的例子阐明源码的流程
patchVnode(oldVnode, newVnode, insertedVnodeQueue, newCh, newIdx)：当 oldVnode=newVnode 的时候，才会触发 patchVnode() 办法，进行新旧 VNodeData 的更新，而后进行 children 元素的比拟，进行新增删除 / 向下比拟触发updateChildren()，除了更新数据(同个 VNode 进行数据更新)、解决 children(addVNode/removeVNode/updateVNode- 选择性更新)，不做其它解决

上面所有图中旧的 children 真实情况下应该存在 oldVNode 的 DOM 援用状况，为了偷懒，会将矩形外边的节点当作 oldVNode 援用 DOM 的地位，矩形包裹才是旧 VNode 的地位，因而会呈现状况 5 中就算挪动了元素到其它地位，依然存在元素在 oldVNode 中的状况

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {// 状况 4: oldEndIdx === newStartIdx} else {// 状况 5: 四端都找不到同样的 VNode}
}

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {
        // 状况 4: oldEndIdx === newStartIdx

        // 数据更新，如果有 children，也在 patchVnode()外部进行调用解决，addVNode/removeVNode/updateChildren
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        // 调整目前 DOM 元素的地位，将 oldEndVnode 的 DOM 挪动到 oldStartVnode 的 DOM 后面
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx] // 更新索引
        newStartVnode = newCh[++newStartIdx] // 更新索引
    } else {// 状况 5: 四端都找不到同样的 VNode}
}

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {
        // 状况 2: oldEndIdx === newEndIdx

        // 数据更新，如果有 children，也在 patchVnode()外部进行调用解决，addVNode/removeVNode/updateChildren
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {
        // 状况 4: oldEndIdx === newStartIdx

        //......
    } else {// 状况 5: 四端都找不到同样的 VNode}
}

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {
        // 状况 2: oldEndIdx === newEndIdx

        //....
    } else if (sameVnode(oldStartVnode, newEndVnode)) {
        // 状况 3: oldStartIdx === newEndIdx

        // 数据更新，如果有 children，也在 patchVnode()外部进行调用解决，addVNode/removeVNode/updateChildren
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        // 调整目前 DOM 元素的地位，将 oldStartVnode 的 DOM 挪动到 oldEndVnode 的 DOM 前面
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) {
        // 状况 4: oldEndIdx === newStartIdx

        //......
    } else {// 状况 5: 四端都找不到同样的 VNode}
}

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {
        // 状况 1: oldStartIdx === newStartIdx

        // 数据更新，如果有 children，也在 patchVnode()外部进行调用解决，addVNode/removeVNode/updateChildren
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
        // 状况 2: oldEndIdx === newEndIdx

        //....
    } else if (sameVnode(oldStartVnode, newEndVnode)) {
        // 状况 3: oldStartIdx === newEndIdx

        //....
    } else if (sameVnode(oldEndVnode, newStartVnode)) {
        // 状况 4: oldEndIdx === newStartIdx

        //......
    } else {// 状况 5: 四端都找不到同样的 VNode}
}

四端无奈找到可匹配的 VNode，然而两头能够找到

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {// 状况 4: oldEndIdx === newStartIdx} else {
        // 状况 5: 四端都找不到同样的 VNode
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
            ? oldKeyToIdx[newStartVnode.key]
            : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
            // ... 
        } else {
            // 命中上面代码
            vnodeToMove = oldCh[idxInOld]
            if (sameVnode(vnodeToMove, newStartVnode)) {// 数据更新，如果有 children，也在 patchVnode()外部进行调用解决，addVNode/removeVNode/updateChildren
                patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
                // 将索引中的 oldCh[idxInOld]置为空，不便前面间接跳过
                oldCh[idxInOld] = undefined
                // 调整目前 DOM 元素的地位，将 oldCh[idxInOld]的 DOM 挪动到 oldStartVnode 后面
                canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
            } else {
                // same key but different element. treat as new element
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
            }
        }
        newStartVnode = newCh[++newStartIdx]
    }
}

(新条件 1)oldStartVnode=undefine：两头区域可复用区域间接跳过下一次循环

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {
        // 新条件 1：oldStartVnode=undefine
        oldStartVnode = oldCh[++oldStartIdx] // 状况 5 置为 undefined 的 startVNode
    } else if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {// 状况 4: oldEndIdx === newStartIdx} else {
        // 状况 5: 四端都找不到同样的 VNode
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
            ? oldKeyToIdx[newStartVnode.key]
            : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
            // ... 
        } else {
            // 命中上面代码
            vnodeToMove = oldCh[idxInOld]
            if (sameVnode(vnodeToMove, newStartVnode)) {
                // ...
                oldCh[idxInOld] = undefined
                // ...
            } else {// ...}
        }
        newStartVnode = newCh[++newStartIdx]
    }
}

四端无奈找到可匹配的 VNode，两头也无奈找到，属于新增元素

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {oldStartVnode = oldCh[++oldStartIdx] // 状况 5 置为 undefined 的 startVNode
    } else if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {// 状况 4: oldEndIdx === newStartIdx} else {
        // 状况 5: 四端都找不到同样的 VNode
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
            ? oldKeyToIdx[newStartVnode.key]
            : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { 
            // 命中上面代码，新增元素并且插入 oldStartVNode 对应的 DOM 后面
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {vnodeToMove = oldCh[idxInOld]
            if (sameVnode(vnodeToMove, newStartVnode)) {
                // ...
                oldCh[idxInOld] = undefined
                // ...
            } else {// ...}
        }
        newStartVnode = newCh[++newStartIdx]
    }
}

完结第一个循环须要删除不必的旧 VNode

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {
        // 新条件 1：oldStartVnode=undefine
        oldStartVnode = oldCh[++oldStartIdx] // 状况 5 置为 undefined 的 startVNode
    } else if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {// 状况 4: oldEndIdx === newStartIdx} else {
        // 状况 5: 四端都找不到同样的 VNode，两头可复用，挪动 DOM/ 两头不可复用，新增插入 DOM
        if (isUndef(idxInOld)) {// 四端都找不到同样的 VNode，两头不可复用，新增插入 DOM} else {vnodeToMove = oldCh[idxInOld]
            if (sameVnode(vnodeToMove, newStartVnode)) {// 四端都找不到同样的 VNode，两头可复用，挪动 DOM} else {// key 雷同，其它条件不同当作新 VNode 解决，即两头不可复用，新增插入 DOM 解决}
        }
    }
}
if (newStartIdx > newEndIdx) {
    // 循环完结 1：删除曾经废除的旧 VNode
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
}

从下面剖析代码能够看出，条件中还短少 oldEndVnode 不存在以及完结第一个循环时，oldStartIdx > oldEndIdx两种可能性的判断，事实上这两种状况也有可能产生

临时还没想好场景，先作为补齐条件判断退出

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {
        // 新条件 1：oldStartVnode=undefine
        oldStartVnode = oldCh[++oldStartIdx] // 状况 5 置为 undefined 的 startVNode
    } else if (isUndef(oldEndVnode)) {
        // 新条件 2：oldEndVnode=undefine
        oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {// 状况 4: oldEndIdx === newStartIdx} else {
        // 状况 5: 四端都找不到同样的 VNode，两头可复用，挪动 DOM/ 两头不可复用，新增插入 DOM
        if (isUndef(idxInOld)) {// 四端都找不到同样的 VNode，两头不可复用，新增插入 DOM} else {vnodeToMove = oldCh[idxInOld]
            if (sameVnode(vnodeToMove, newStartVnode)) {// 四端都找不到同样的 VNode，两头可复用，挪动 DOM} else {// key 雷同，其它条件不同当作新 VNode 解决，即两头不可复用，新增插入 DOM 解决}
        }
    }
}
if (newStartIdx > newEndIdx) {
    // 删除曾经废除的旧 VNode
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
}

由下面的剖析能够晓得，一开始会触发状况 1: oldStartIdx === newStartIdx，而后 oldStartIdx++ 和oldEndIdx++，此时因为oldStartIdx>oldEndIdx，循环完结

从上图能够看出，目前 newCh 还有一个 VNode 未解决，因而须要遍历 [newStartIdx, newEndIdx] 进行残余元素的增加解决，如上面代码所示，循环区间，进行 createElm() 操作

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {
        // 新条件 1：oldStartVnode=undefine
        oldStartVnode = oldCh[++oldStartIdx] // 状况 5 置为 undefined 的 startVNode
    } else if (isUndef(oldEndVnode)) {
        // 新条件 2：oldEndVnode=undefine
        oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {// 状况 1: oldStartIdx === newStartIdx} else if (sameVnode(oldEndVnode, newEndVnode)) {// 状况 2: oldEndIdx === newEndIdx} else if (sameVnode(oldStartVnode, newEndVnode)) {// 状况 3: oldStartIdx === newEndIdx} else if (sameVnode(oldEndVnode, newStartVnode)) {// 状况 4: oldEndIdx === newStartIdx} else {
        // 状况 5: 四端都找不到同样的 VNode，两头可复用，挪动 DOM/ 两头不可复用，新增插入 DOM
        if (isUndef(idxInOld)) {// 四端都找不到同样的 VNode，两头不可复用，新增插入 DOM} else {vnodeToMove = oldCh[idxInOld]
            if (sameVnode(vnodeToMove, newStartVnode)) {// 四端都找不到同样的 VNode，两头可复用，挪动 DOM} else {// key 雷同，其它条件不同当作新 VNode 解决，即两头不可复用，新增插入 DOM 解决}
        }
    }
}
if (oldStartIdx > oldEndIdx) {
    // 如果新的 children 最初一个节点曾经解决实现，那么初始化 refElm 为最初一个节点
    // 由上面 insert 办法能够晓得，插入元素会 nodeOps.insertBefore(parent, elm, ref)
    // 一直在 ref 后面插入 [newStartIdx,newEndIdx] 的 DOM
    // 因为 ref 统一都不会动，因而 [newStartIdx,newEndIdx] 能够程序插入
    // 如果新的 children 最初一个节点还没解决，那么解决 refElm=null
    // 由上面 insert 办法能够晓得，插入元素会 nodeOps.appendChild(parent, elm)
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    // addVnodes:[newStartIdx,newEndIdx]遍历调用 createElm 插入 DOM 元素
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
} else if (newStartIdx > newEndIdx) {// 循环完结 1: 删除多余的 oldVNode}

// addVnodes->createElm()->insert()
function insert(parent, elm, ref) {if (isDef(parent)) {if (isDef(ref)) {if (nodeOps.parentNode(ref) === parent) {nodeOps.insertBefore(parent, elm, ref)
            }
        } else {nodeOps.appendChild(parent, elm)
        }
    }
}

if (isDef(data)) {if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
}

参考 Vue2 自定义指令的钩子函数：https://v2.cn.vuejs.org/v2/guide/custom-directive.html#ad

从上面的源码剖析和文档能够晓得，postpatch()实际上调用的是 componentUpdated() 的钩子函数，代表指令所在组件的 VNode 及其子 VNode 全副更新后调用

if (dirsWithPostpatch.length) {mergeVNodeHook(vnode, 'postpatch', function () {for (var i = 0; i < dirsWithPostpatch.length; i++) {callHook(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode);
        }
    });
}

比方上面的示例代码，如果咱们注册了一个 test33 的自定义指令，那么 <div v-test33></div> 所在组件的 VNode 及其子 VNode 全副更新后就会调用注册的 componentUpdated() 办法

// html
<template>
    <div v-test33></div>
</template>

//js
Vue.directive('test33', {componentUpdated: function () {console.error("测试 componentUpdated");
    }
})

vue-design

正文完

前端

发表至：前端

2022-11-06

0

关于前端:现代化前端规范工具代码

关于前端:Yarn-duplicate及解决方案

关于前端:DAppNode-Host普通人如何玩转区块链

关于前端:精读设计模式-Prototype-原型模式

关于redis:virtualbox-Linux-配置Redis无中心集群三主三从

关于前端:Vue2-双端比较diff算法patchVNode流程浅析

文章内容

前置常识

prepatch()触发

触发 update()办法执行

分状况进行 children 的比拟

外围局部 updateChildren()

前置阐明

条件分类代码

状况 4: oldEndIdx===newStartIdx

状况 2: oldEndIdx===newEndIdx

状况 3: oldStartIdx === newEndIdx

状况 1: oldStartIdx === newStartIdx

状况 5: 四端都无奈找到能够复用，雷同的 VNode

四端无奈找到可匹配的 VNode，然而两头能够找到

(新条件 1)oldStartVnode=undefine：两头区域可复用区域间接跳过下一次循环

四端无奈找到可匹配的 VNode，两头也无奈找到，属于新增元素

(循环完结 1)newStartIdx > newEndIdx

(新条件 2)oldEndVnode=undefine

(循环完结 2)oldStartIdx>oldEndIdx

触发 postpatch()执行

参考文章

站内搜索