vue虚拟dom核心方法patch解析

矫情吗；* 2023-01-23 12:58 149阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

## 浏览器渲染引擎流程 ##

创建DOM树——>创建StyleRules——>创建Render树——>布局Layout——>绘制Painting

## 虚拟DOM，virtual Dom ##

首先虚拟DOM 并不是Vue独有的，包括React等其他前端框架，只要采用了先计算后操作实体DOM都可以统称为基于虚拟DOM。

其设计是为了解决浏览器的性能问题。

## snabbdom ##

而Vue的虚拟DOM技术 主要基于GitHub 中的snabbdom：

> snabbdom：一个专注于简单性、模块化、强大功能和性能的虚拟 DOM 库。

[https://github.com/snabbdom/snabbdom][https_github.com_snabbdom_snabbdom]

![在这里插入图片描述][20210715113340961.png]

可以说理解了snabbdom 中的具体方法即理解了vue中虚拟dom的核心思想：  
当状态更新时，将新的JavaScript对象和旧的JavaScript对象进行比较(即diff算法)，运算出两者的差异，将差异应用到真正的DOM，以此减少了DOM的操作。

### diff 策略 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]

*  只比较同一级，不跨级比较
 *  标签名不同，直接删除，不继续深度比较
 *  标签名相同，key相同就认为是相同节点，不继续比较

### patch ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]

patch方法是虚拟dom核心中的核心。在VNode(虚拟节点)改变后和初始化前都会调用。

##### 主要逻辑如下： #####

*  调用 module 中的 pre hook（生命周期相关）
 *  如果传入的是 Element 转成空的 vnode（这里在首次创建时，会传入一个dom元素）
 *  新旧节点为 sameVnode 的话，则调用 patchVnode 更新 vnode , 否则创建新节点
 *  创建新节点 ，插入新节点 ，移除旧节点
 *  调用元素上的 insert hook（生命周期相关）
 *  调用元素上的 post hook（生命周期相关）

##### 源码解析： #####

### patchVnode ###

##### 主要逻辑如下： #####

*  调用 module 中的 prepatch hook（生命周期相关）
 *  按照新旧Vnode 的text 和children 的差异做出差异化处理
 *  值得注意的是：新旧节点均存在 children，且不一样时，对 children 进行 diff 调用 updateChildren

### 核心方法updateChildren ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]  
新的Vnode 和 老的Vnode 都有children时，进入方法。

*  对新旧node分别赋值 newStartIdx oldStartIdx newEndIdx oldEndIdx 进行指针循环遍历
 *  对不符合same 的节点进行劲增 其他的进行patchVnode 的替换
 *  循环结束处理剩余节点 进行批量删除或批量新增

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { 
        let oldStartIdx = 0
        let newStartIdx = 0
        let oldEndIdx = oldCh.length - 1
        let oldStartVnode = oldCh[0]
        let oldEndVnode = oldCh[oldEndIdx]
        let newEndIdx = newCh.length - 1
        let newStartVnode = newCh[0]
        let newEndVnode = newCh[newEndIdx]
        let oldKeyToIdx, idxInOld, elmToMove, refElm
     
        // removeOnly is a special flag used only by <transition-group>
        // to ensure removed elements stay in correct relative positions
        // during leaving transitions
        const canMove = !removeOnly
     
        while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { 
          if (isUndef(oldStartVnode)) { 
            oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
          } else if (isUndef(oldEndVnode)) { 
            oldEndVnode = oldCh[--oldEndIdx]
          } else if (sameVnode(oldStartVnode, newStartVnode)) { 
            patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
            oldStartVnode = oldCh[++oldStartIdx]
            newStartVnode = newCh[++newStartIdx]
          } else if (sameVnode(oldEndVnode, newEndVnode)) { 
            patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]
          } else if (sameVnode(oldStartVnode, newEndVnode)) {  // Vnode moved right
            patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
            canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]
          } else if (sameVnode(oldEndVnode, newStartVnode)) {  // Vnode moved left
            patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
            canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]
          } else { 
            if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
            idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
            if (isUndef(idxInOld)) {  // New element
              createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
              newStartVnode = newCh[++newStartIdx]
            } else { 
              elmToMove = oldCh[idxInOld]
              if (sameVnode(elmToMove, newStartVnode)) { 
                patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
                oldCh[idxInOld] = undefined
                canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
                newStartVnode = newCh[++newStartIdx]
              } else { 
                // same key but different element. treat as new element
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
                newStartVnode = newCh[++newStartIdx]
              }
            }
          }
        }
        if (oldStartIdx > oldEndIdx) { 
          refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
          addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
        } else if (newStartIdx > newEndIdx) { 
          removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
        }
      }

### 导图总结 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]

> https://juejin.cn/post/6844903671906435080\#heading-0  
> https://segmentfault.com/a/1190000017519084  
> https://www.cnblogs.com/lilicat/p/13448827.html  
> 本文源码注释部分参考 掘金 迅雷前端 、segmentfault-chen4342024等文章

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20221004/bf8067ee958342ec9bc51afe33c1e395.png
[https_github.com_snabbdom_snabbdom]: https://github.com/snabbdom/snabbdom
[20210715113340961.png]: /images/20221004/2853e0c114d848fcba969d8fb0562f47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: /images/20221004/912c2618486d4421a0cf4201f386c1fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 2]: /images/20221004/02eec61b99da4d6a9a47eafcefa59bdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 3]: /images/20221004/43a4c3f025d64e3481cfec20f58240e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 4]: /images/20221004/c106f38b594d4fb5ae6851a82cb23b09.png