vue DOM-Diff 源码解析

DOM-Diff

vue的以数据为驱动，更新视图，区别于直接操作DOM更新视图，最重要的地方就是在于DOM-Diff，他能尽量的避免操作DOM的操作，以此来获取更优的性能

patch

对比新旧VNode，得出需要修改的地方,总要阐述一下就一下三点

• 如果新VNode有 而旧VNode没有，则在旧VNode上添加上
• 如果新VNode没有 但是旧VNode有， 就在旧VNode上删除
• 如果新旧VNode都有，则以新VNode为模板，更新旧VNode

具体步骤

• 首先判断新节点是否为undefined，如果是，则调用destroy钩子销毁旧节点
• 如果旧节点为undefined，表示是页面初次渲染直接创建节点
• 如果新旧节点相同，则执行patchVNode
• 如果新旧节点不同，则直接销毁旧节点创建新节点

return function patch (oldVnode, vnode, hydrating, removeOnly) {
    // 1.没有新节点  有旧节点 则直接销毁旧节点
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    //首次初始化标志
    let isInitialPatch = false
    const insertedVnodeQueue = []

    // 2.旧节点未定义， 第一次初始化vnode
    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue)
    } else {
      // 判断是否是真的节点
      const isRealElement = isDef(oldVnode.nodeType)
      // 3.两个都是Vnode 并且 新旧Vnode 相等
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
      } else {
        // 如果为元素节点，并且有ssr标签
        if (isRealElement) {
          // mounting to a real element
          // check if this is server-rendered content and if we can perform
          // a successful hydration.
          if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          if (isTrue(hydrating)) {
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            } else if (process.env.NODE_ENV !== 'production') {
              warn(
                'The client-side rendered virtual DOM tree is not matching ' +
                'server-rendered content. This is likely caused by incorrect ' +
                'HTML markup, for example nesting block-level elements inside ' +
                '<p>, or missing <tbody>. Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
            // 创建一个空的旧Vnode
          oldVnode = emptyNodeAt(oldVnode)
        }

        // replacing existing element
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)

        //4. create new node，创建新节点
        createElm(
          vnode,
          insertedVnodeQueue,
          // extremely rare edge case: do not insert if old element is in a
          // leaving transition. Only happens when combining transition +
          // keep-alive + HOCs. (#4590)
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )

        // update parent placeholder node element, recursively
        if (isDef(vnode.parent)) {
          let ancestor = vnode.parent
          const patchable = isPatchable(vnode)
          while (ancestor) {
            for (let i = 0; i < cbs.destroy.length; ++i) {
              cbs.destroy[i](ancestor)
            }
            ancestor.elm = vnode.elm
            if (patchable) {
              for (let i = 0; i < cbs.create.length; ++i) {
                cbs.create[i](emptyNode, ancestor)
              }
              // #6513
              // invoke insert hooks that may have been merged by create hooks.
              // e.g. for directives that uses the "inserted" hook.
              const insert = ancestor.data.hook.insert
              if (insert.merged) {
                // start at index 1 to avoid re-invoking component mounted hook
                for (let i = 1; i < insert.fns.length; i++) {
                  insert.fns[i]()
                }
              }
            } else {
              registerRef(ancestor)
            }
            ancestor = ancestor.parent
          }
        }

        // destroy old node
        if (isDef(parentElm)) {
          removeVnodes([oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }

    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }

问题

• ancestor函数

patchVnode

是当patch函数中新旧节点都存在，并且sameVnode(oldVnode,Vnode)返回true 时候会调用。

意味着，新旧Vnode 中，有可以利用的部分，只需要替换部分结构

//core/vdom/patch.js
//核心代码
const oldCh = oldVnode.children
const ch = vnode.children
if (isUndef(vnode.text)) { // 非Text元素
     if (isDef(oldCh) && isDef(ch)) {
         //新旧vnode children 不相等，更新子节点
         if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
         //新vnode有children 旧vnode没有
     } else if (isDef(ch)) {
         // 如果旧vnode 是一个文本节点
         if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
         addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
         //如果旧节点ch存在新节点ch不存在，直接清楚旧节点所有ch
     } else if (isDef(oldCh)) {
         removeVnodes(elm, oldCh, 0, oldCh.length - 1)
         //如果新旧节点ch都不存在，并且旧节点ch是一个文本节点，那么将旧节点ch清空
     } else if (isDef(oldVnode.text)) {
         nodeOps.setTextContent(elm, '')
     }
    //如果当前孩子是textNode 更新text即可
 } else if (oldVnode.text !== vnode.text) { // text元素直接更新text
     nodeOps.setTextContent(elm, vnode.text)
 }

具体步骤分为两种情况

• 如果新孩子是textNode更新text即可
• 如果新孩子不是textNode又分为三种情况
  • 新旧孩子都有，执行 updateChildren
  • 有新孩子没有旧孩子，直接创建新孩子
  • 有旧孩子没有新孩子，将旧孩子移除

updateChildren DOM-Diff核心

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, vnodeToMove, 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

    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(newCh)
    }

    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]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
          //没有出现过
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          //出现过
          vnodeToMove = oldCh[idxInOld]
            // 判断是否相同节点
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            // 插入在newStartIdx
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        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)
    }
  }

updateChildren比较过程

• 新头 旧头比较，如果相同，执行patchVnode进行深一层次比较
• 新尾与旧尾节点比较，
• 新头 旧尾比较
• 新尾 旧头比较
• 如果上述四种情况都没命中，那么有分为两种情况
  • 如果新头节点在旧节点中存在，并且sameVnode为true那么直接进行patchVnode
  • 如果新头节点在旧节点中不存在或者sameVnode为false那么直接创建一个新节点
• 跳出while后如果旧节点比较完，新节点还有多，那么直接在旧节点中插入新节点
• 如果是新节点比较完后，旧节点还有剩余，直接删除所有剩下的旧节点

总结

vue的 DOM-Diff 主要是通过patch来打补丁，通过patchVnode来具体比较那一部分能复用，最后通过updateChildren来实现真正的更新