Vue源码解析问题(4 如何理解vue—diff算法)

967 阅读4分钟

4 如何理解vue—diff算法

diff算法是一个大的概念,常用于虚拟dom的比对,并不仅限于Vue。了解vue-diff 可以从以下几个方面入手

如何理解diff

首先,diff是一种算法,用来计算出Virtual DOM中改变的部分,然后针对找到最小差异部分DOM,只更新差异部分DOM,而不用重新渲染整个页面。diff 不仅限于vue、react,凡是涉及到Vdom,一般都会用到diff算法。

vue为什么要使用diff

vue 1.0 的响应式更新粒度极小,每个数据与使用到自己的dom节点都绑定了依赖关系,因此内存开销比较大。
vue 从 2.0 开始使用 vdom,选择的理由是:抽象 diff 过程,使得 ssr,weex 等跨端成为可能。 组件的每个数据只是与组件建立依赖关系,即一个组件一个Watcher ,这样内存开销变少了,这也是vdom的diff更新机制给vue带来的能力 (先不去讨论抽象diff的不足,也不去讨论跨端等等)

因为vue2.0中,我们都知道组件中可能存在多个data 中的key使用,因为 Watcher 粒度的降低,无法确保组件内部是哪个key发生了改变,就需要用到diff算法来比对。
由下可知,当组件创建时,会创建一个Watcher,所以2.0中。组件与Watcher是一一对应的。
用户$mount()时,定义updateComponent,也就会创建一个Watcher,在vue2.0中Watcher实例与组件实例是一一对应的。
验证代码如下

源码url: src\core\instance\lifecycle.js => mountComponent
export function mountComponent (···): Component {
  vm.$el = el
  ···
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
   ···
  } else {
    // 用户$mount()时,定义updateComponent
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  // 当组件调用$mount,就会创建一个Watcher,在vue2.0中vatcher实例与组件实例是一对一的
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  return vm
}

在vue中diff是如何应用的

vue中的diff算法遵循一个策略,深度优先、同层比较
先更新属性(2.0应优化项,3.0已优化),然后比较新老根节点,如果根节点有孩子,先进入孩子比较。由此递归,孩子更新后,找父级同级比较

diff源码起始点url: src\core\vdom\patch.js => patchVnode => updateChildren (核心对比方法)
// 比较根节点 diff算法起始点
  function patchVnode (···) {
    ···
    // 1.获取双方子节点
    const oldCh = oldVnode.children
    const ch = vnode.children
    
    // 2.属性更新
    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)
    }

    // 3.根据孩子或文本几种不同组合做对应操作
    if (isUndef(vnode.text)) {
      // 都有孩子 比孩子 做重排 递归
      if (isDef(oldCh) && isDef(ch)) {
        // 比孩子 ,reorder 重新排序
        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)
    }
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }
diff核心对比方法: src\core\vdom\patch.js => updateChildren (核心对比方法)

总结:根据首尾对比查询,假设头尾节点可能相同做4次比对尝试,如果 没有找到相同节点才按照通用方式遍历查找,查找结束再按情况处理剩下的节点

 // 双方都有子节点更新逻辑
  function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    // 这里设定4个游标和节点
    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
    ···
    // 循环条件 游标不能重叠
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      // 前两种情况:游标移动可能造成对应节点为空,需要调整一下
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      }
      // 后面的4个条件  首位查找
      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 {
        // 从新数组获取第一个节点,从老数组中查找相同节点
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        // idxInOld是老数组中的索引
        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, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            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]
      }
    }

    // 循环结束
    // 老数组结束,新数组还有剩下的 做批量创建
    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(oldCh, oldStartIdx, oldEndIdx)
    }
  }

总结

1.diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即diff),将变化的地方更新在真 实DOM上;另外,也需要diff高效的执行对比过程,从而降低时间复杂度为O(n)。
2.vue 2.x中为了降低Watcher粒度,每个组件只有一个Watcher与之对应,只有引入diff才能精确找到 发生变化的地方。
3.vue中diff执行的时刻是组件实例执行其更新函数时,它会比对上一次渲染结果oldVnode和新的渲染 结果newVnode,此过程称为patch。 4.diff过程整体遵循深度优先、同层比较的策略;两个节点之间比较会根据它们是否拥有子节点或者文 本节点做不同操作;比较两组子节点是算法的重点,首先假设头尾节点可能相同做4次比对尝试,如果 没有找到相同节点才按照通用方式遍历查找,查找结束再按情况处理剩下的节点;借助key通常可以非 常精确找到相同节点,因此整个patch过程非常高效。