Vue中的DOM-Diff

VNode

Vue中使用VNode类型保存virtual dom，对应Vue源码中/* src/core/vdom/vnode.js */文件定义。通过一系列的属性间的搭配可以描述不同的节点类型

    this.tag = tag  /* el标签名 */
    this.data = data  /* 存储特性信息 */
    this.children = children  /*当前节点的子节点，是一个数组*/
    this.text = text    /*  当前节点的文本  */
    this.elm = elm /*当前虚拟节点对应的真实dom节点*/
    this.ns = undefined
    this.context = context // 当前节点对应的Vue实例
    this.fnContext = undefined  /* 函数组件对应的option实例 */
    this.fnOptions = undefined /* 函数式组件对应的option选项  */
    this.fnScopeId = undefined 
    this.key = data && data.key  /*节点的key属性，被当作节点的标志，用以优化*/
    this.componentOptions = componentOptions /* 组件的option选项 */
    this.componentInstance = undefined /*当前节点对应的组件的实例*/
    this.parent = undefined /* 当前节点父节点 */
    this.raw = false
    this.isStatic = false /*  是否为静态节点  类似<p>静态节点，不包括数据</p>*/ 
    this.isRootInsert = true
    this.isComment = false /* 是否为注释节点 */
    this.isCloned = false
    this.isOnce = false /* 是否具有v-once 指令*/
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false

比如创建注释节点

//  创建注释节点
export const createEmptyVNode = (text: string = '') => {
  const node = new VNode()
  // 注释描述
  node.text = text
  // 是注释
  node.isComment = true
  return node
}

DOM-DIff

DOM-Diff实际上就是对比新旧VNode的过程，对旧VNode进行增加节点、删除节点、更新节点的过程。这个过程就好像参考新VNode对旧VNode进行打补丁(patch)的过程，该过程在源码中定义在src\core\vdom\patch.js中。

新旧节点都是静态节点（类似<p>不存在</p>）且key相同则退出

    // 新节点和就节点都是静态节点则退出
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === oldVnode.key &&
      (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
      vnode.componentInstance = oldVnode.componentInstance
      return
    }

如果新VNode没有text属性
1. 两个节点都有子节点且不相等则更新子节点
2. 新VNode有子节点，旧VNode没有子节点则为旧VNode添加节点
3. 旧VNode有子节点，新VNode没有，则删除旧VNode子节点
4. 不满足上述情况，且旧VNode有文本，则删除旧VNode文本

 // 有没有text属性
    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(elm, oldCh, 0, oldCh.length - 1)
      } 
      // 新旧节点都没有子节点，但是子节点存在文本
      else if (isDef(oldVnode.text)) {
        // 清空文本节点
        nodeOps.setTextContent(elm, '')
      }
    }

如果新VNode存在text属性，则更新旧VNode文本为新VNode text

    // 旧节点的文本不等于新节点
    else if (oldVnode.text !== vnode.text) {
      nodeOps.setTextContent(elm, vnode.text)
    }

更新子节点

上面的DOM-Diff其实很好理解，可能稍微比较困难需要处理的地方就是当新、旧VNode都有子节点时需要遍历对新、旧VNode的子节点进行更新。

  // 如果两个都有子节点
      if (isDef(oldCh) && isDef(ch)) {
        // 如果不相等则更新子节点
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)   
      }

更新策略即外层循环newChildren，内层循环oldChildren。循环的时候主要这么几种情况

第一次就发现节点相同则patch更新节点
发现相同节点但是位置不同，则将patch并将节点移动到所有未处理节点之前，不能移动到已处理节点之后，原因在于如果之前存在新增节点，当前节点本应移动到之前新增节点之后，如果移动到已处理节点之后就会占据之前新增节点所在位置
如果在oldChildren中没有找到相应的节点，则新增节点到所有未处理节点之前
如果遍历完newChildren，oldChildren还存在节点，则删除剩余节点

 if (isUndef(idxInOld)) {   // 如果在oldChildren里找不到当前循环的newChildren里的子节点
          // 那么久创建子节点并插入到合适位置
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
        // 在old中找到newchild子节点 
        else {
          // 需要移动的子节点
          vnodeToMove = oldCh[idxInOld]
          // 如果两个子节点相同
          if (sameVnode(vnodeToMove, newStartVnode)) {
            // 更新子节点
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            // canmove表示需要移动节点
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } 
          else {
            // 相同接key，但是是不同的元素
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }

优化更新子节点

循环遍历子节点进行更新的方法，虽然能够达到要求，但是如果是这样直接循环，那么在子节点数据量比较多时，时间复杂度会很高，那么就需要优化更新子节点了，使用新前newStart、新后newEnd、旧前oldStart、旧后oldEnd之前实现双向对比，两两之间比较
在这里插入图片描述

新前与旧前比较如果相同则patch更新，同时新前索引和旧前索引增加
新后与旧后相等则patch更新，同时新后和旧后的索引减少
新前与旧后相同则patch更新，移动节点到所有未处理节点之前，同时新前索引增加，旧后索引减少
新后与旧前相同则patch更新，移动节点到所有未处理节点之后，同时新后索引减少，旧前索引增加
如果不是上述情况则进行普通的循环更新
如果oldStartIdx索引 > oldEndIdx索引，则代表newChildren还存在节点没有循环完，则添加(newStartIdx,newEndIdx)范围剩余完节点到DOM中
如果newStartIdx索引 > newEndIdx索引，还存在oldChildren没有遍历完，则删除(oldStartIdx,oldEndIdx)范围内节点

需要注意的是，对所有节点的更新操作都是针对旧VNode进行的，也就是前边说的对节点进行patch的过程

    // 新前、新后，旧前、旧后两两更新
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      // 如果子节点没有，就下一个
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      }
      // 如果end不存在 则向前 
      else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      }
      // 如果新前节点与旧前节点相同，则更新，并同时向后移 
      else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      }
      // 如果旧后与新后相同，则更新，并同时向前移
      else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      }
      // 如果旧前与新后相同则更新并移动 
      else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        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, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      }
      //  如果不是上述情况将就进行普通的循环对比
      else {
        // 如果在oldChildren里找不到当前循环的newChildren里的子节点
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) {   // 如果在oldChildren里找不到当前循环的newChildren里的子节点
          // 那么久创建子节点并插入到合适位置
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        }
        // 在old中找到newchild子节点 
        else {
          // 需要移动的子节点
          vnodeToMove = oldCh[idxInOld]
          // 如果两个子节点相同
          if (sameVnode(vnodeToMove, newStartVnode)) {
            // 更新子节点
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            // canmove表示需要移动节点
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } 
          else {
            // 相同接key，但是是不同的元素
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    // old循环完，new没循环完，将newStart -> newEnd 中间的值插入到DOM中
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    }
    // 如果新节点遍历完，old还没有遍历完，将oldStart -> oldEnd 的DOM移除
     else if (newStartIdx > newEndIdx) {
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }

how2js

发布了85 篇原创文章 · 获赞 62 · 访问量 2万+

私信关注

VNode

DOM-DIff

更新子节点

优化更新子节点

猜你喜欢