Vue的transition-group与Virtual Dom Diff算法的使用

  // 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, 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 = isDef(newStartVnode.key)
     "htmlcode">

function sameVnode (a, b) {
 return (
  a.key === b.key && (
   (
    a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
   ) || (
    isTrue(a.isAsyncPlaceholder) &&
    a.asyncFactory === b.asyncFactory &&
    isUndef(b.asyncFactory.error)
   )
  )
 )
}



首先会判断key是否一致，然后是tag类型还有input类型等等。


所以下标作为key的时候，很明显key会很容易就会判断为一致了，其次就是要看tag类型等等。


继续如果从map里面找到了对应的旧Vnode，又会继续把这个Vnode对应的Dom节点移动到旧的oldStartElem前面。
综上，Diff算法的移动都是在旧Vnode上进行的，而新Vnode仅仅只是更新了elm这个属性。


在个Diff算法的最后，可以想象一种情况，元素都会往头尾两边移动，剩下都是待会要剔除的元素了，需要执行离开动画，但是这个效果肯定很糟糕，因为这个时候的列表是打乱了的，我们所期望的动画明显是元素从原有的位置执行离开动画了，那么也就是removeOnly存在的意义了。
transition-group的魔法


transition-group是如何利用removeOnly的尼；直接跳到transition-group的源码上，直接就是一段注释：


// Provides transition support for list items.
// supports move transitions using the FLIP technique.

// Because the vdom's children update algorithm is "unstable" - i.e.
// it doesn't guarantee the relative positioning of removed elements,
// we force transition-group to update its children into two passes:
// in the first pass, we remove all nodes that need to be removed,
// triggering their leaving transition; in the second pass, we insert/move
// into the final desired state. This way in the second pass removed
// nodes will remain where they should be.




大意就是：


这个组件是为了给列表提供动画支持的，而组件提供的动画运用了FLIP技术；


因为Diff算法是不能保证移除元素的相对位置的(正如我们上面总结的)，我们让transition-group的更新必须经过了两个阶段，第一个阶段：我们先把所有要移除的元素移除以便触发它们的离开动画；在第二个阶段：我们才把元素移动到正确的位置上。

知道了大致的逻辑了，那么transition-group具体是怎么实现的尼？


首先transition-group继承了transiton组件相关的props，所以它们两个真是铁打的亲兄弟。


const props = extend({
 tag: String,
 moveClass: String
}, transitionProps)



然后第一个重点来了beforeMount方法


beforeMount () {
  const update = this._update
  this._update = (vnode, hydrating) => {
   const restoreActiveInstance = setActiveInstance(this)
   // force removing pass
   this.__patch__(
    this._vnode,
    this.kept,
    false, // hydrating
    true // removeOnly (!important, avoids unnecessary moves)
   )
   this._vnode = this.kept
   restoreActiveInstance()
   update.call(this, vnode, hydrating)
  }
 }



transition-group对_update方法做了特殊处理，先强行进行一次patch，然后才执行原本的update方法，这里也就是刚才注释说的两个阶段的处理；


接着看this.kept，transition-group是在什么时候对VNode tree做的缓存的尼，再跟踪代码发现render方法也做了特殊处理：


render (h: Function) {
  const tag: string = this.tag || this.$vnode.data.tag || 'span'
  const map: Object = Object.create(null)
  const prevChildren: Array<VNode> = this.prevChildren = this.children
  const rawChildren: Array<VNode> = this.$slots.default || []
  const children: Array<VNode> = this.children = []
  const transitionData: Object = extractTransitionData(this)

  for (let i = 0; i < rawChildren.length; i++) {
   const c: VNode = rawChildren[i]
   if (c.tag) {
    if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
     children.push(c)
     map[c.key] = c
     ;(c.data || (c.data = {})).transition = transitionData
    } else if (process.env.NODE_ENV !== 'production') {
     const opts: "htmlcode">

updated () {
  const children: Array<VNode> = this.prevChildren
  const moveClass: string = this.moveClass || ((this.name || 'v') + '-move')
  if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
   return
  }

  // we divide the work into three loops to avoid mixing DOM reads and writes
  // in each iteration - which helps prevent layout thrashing.
  children.forEach(callPendingCbs)
  children.forEach(recordPosition)
  children.forEach(applyTranslation)

  // force reflow to put everything in position
  // assign to this to avoid being removed in tree-shaking
  // $flow-disable-line
  this._reflow = document.body.offsetHeight

  children.forEach((c: VNode) => {
   if (c.data.moved) {
    const el: any = c.elm
    const s: any = el.style
    addTransitionClass(el, moveClass)
    s.transform = s.WebkitTransform = s.transitionDuration = ''
    el.addEventListener(transitionEndEvent, el._moveCb = function cb (e) {
     if (e && e.target !== el) {
      return
     }
     if (!e || /transform$/.test(e.propertyName)) {
      el.removeEventListener(transitionEndEvent, cb)
      el._moveCb = null
      removeTransitionClass(el, moveClass)
     }
    })
   }
  })
 },




这里的处理首先会检查把move class加上之后是否有transform属性，如果有就说明有移动的动画；再接着处理：

  
调起pendding回调，主要是移除动画事件的监听
  
记录节点最新的相对位置
  
比较节点新旧位置，是否有变化，如果有变化就在节点上应用transform，把节点移动到旧的位置上；然后强制reflow，更新dom节点位置信息；所以我们看到的列表可能表面是没有变化的，其实是我们把节点又移动到原来的位置上了；
  
最后我们把位置有变化的节点，加上move class，触发移动动画；

这就是transition-group所拥有的黑魔法，确实帮我们在背后做了不少的事情。
最后


温故而知新，在写的过程中其实发现了以前的理解还是有很多模糊的地方，说明自己平时阅读代码仍然不够细心，没有做到不求甚解，以后必须多多注意，最后的最后，如有错漏，希望大家能够指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。