Vue 源码深入解析之 keep-alive、transition 和 transition-group

痛定思痛。 2023-02-20 07:39 1阅读 0赞

#### 一、 keep-alive 的理解 ####

1.  在我们的平时开发工作中，经常为了组件的缓存优化而使用 `<keep-alive>` 组件，但很少有人关注它的实现原理，下面就让我们看一下。
2.  内置组件，`<keep-alive>` 是 `Vue` 源码中实现的一个组件，也就是说 `Vue` 源码不仅实现了一套组件化的机制，也实现了一些内置组件，它的定义在 `src/core/components/keep-alive.js` 中：

export default { 
      name: 'keep-alive,
      abstract: true,
    
      props: { 
        include: patternTypes,
        exclude: patternTypes,
        max: [String, Number]
      },
    
      created () { 
        this.cache = Object.create(null)
        this.keys = []
      },
    
      destroyed () { 
        for (const key in this.cache) { 
          pruneCacheEntry(this.cache, key, this.keys)
        }
      },
    
      mounted () { 
        this.$watch('include', val => { 
          pruneCache(this, name => matches(val, name))
        })
        this.$watch('exclude', val => { 
          pruneCache(this, name => !matches(val, name))
        })
      },
    
      render () { 
        const slot = this.$slots.default
        const vnode: VNode = getFirstComponentChild(slot)
        const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
        if (componentOptions) { 
          // check pattern
          const name: ?string = getComponentName(componentOptions)
          const {  include, exclude } = this
          if (
            // not included
            (include && (!name || !matches(include, name))) ||
            // excluded
            (exclude && name && matches(exclude, name))
          ) { 
            return vnode
          }
    
          const {  cache, keys } = this
          const key: ?string = vnode.key == null
            // same constructor may get registered as different local components
            // so cid alone is not enough (#3269)
            ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${ componentOptions.tag}` : '')
            : vnode.key
          if (cache[key]) { 
            vnode.componentInstance = cache[key].componentInstance
            // make current key freshest
            remove(keys, key)
            keys.push(key)
          } else { 
            cache[key] = vnode
            keys.push(key)
            // prune oldest entry
            if (this.max && keys.length > parseInt(this.max)) { 
              pruneCacheEntry(cache, keys[0], keys, this._vnode)
            }
          }
    
          vnode.data.keepAlive = true
        }
        return vnode || (slot && slot[0])
      }
    }

1.  可以看到 `<keep-alive>` 组件的实现也是一个对象，注意它有一个属性 `abstract` 为 `true`，是一个抽象组件，`Vue` 的文档没有提这个概念，实际上它在组件实例建立父子关系的时候会被忽略，发生在 `initLifecycle` 的过程中：

// locate first non-abstract parent
    let parent = options.parent
    if (parent && !options.abstract) { 
      while (parent.$options.abstract && parent.$parent) { 
        parent = parent.$parent
      }
      parent.$children.push(vm)
    }
    vm.$parent = parent

1.  `<keep-alive>` 在 `created` 钩子里定义了 `this.cache` 和 `this.keys`，本质上它就是去缓存已经创建过的 `vnode`。它的 `props` 定义了 `include`，`exclude`，它们可以字符串或者表达式，`include` 表示只有匹配的组件会被缓存，而 `exclude` 表示任何匹配的组件都不会被缓存，`props` 还定义了 `max`，它表示缓存的大小，因为我们是缓存的 `vnode` 对象，它也会持有 `DOM`，当我们缓存很多的时候，会比较占用内存，所以该配置允许我们指定缓存大小。
2.  `<keep-alive>` 直接实现了 `render` 函数，而不是我们常规模板的方式，执行 `<keep-alive>` 组件渲染的时候，就会执行到这个 `render` 函数，接下来我们分析一下它的实现。首先获取第一个子元素的 `vnode`：

const slot = this.$slots.default
    const vnode: VNode = getFirstComponentChild(slot)

1.  由于我们也是在 `<keep-alive>` 标签内部写 `DOM`，所以可以先获取到它的默认插槽，然后再获取到它的第一个子节点。`<keep-alive>` 只处理第一个子元素，所以一般和它搭配使用的有 `component` 动态组件或者是 `router-view`，这点要牢记。然后又判断了当前组件的名称和 `include`、`exclude` 的关系：

// check pattern
    const name: ?string = getComponentName(componentOptions)
    const {  include, exclude } = this
    if (
      // not included
      (include && (!name || !matches(include, name))) ||
      // excluded
      (exclude && name && matches(exclude, name))
    ) { 
      return vnode
    }
    
    function matches (pattern: string | RegExp | Array<string>, name: string): boolean { 
      if (Array.isArray(pattern)) { 
        return pattern.indexOf(name) > -1
      } else if (typeof pattern === 'string') { 
        return pattern.split(',').indexOf(name) > -1
      } else if (isRegExp(pattern)) { 
        return pattern.test(name)
      }
      return false
    }

1.  `matches` 的逻辑很简单，就是做匹配，分别处理了数组、字符串、正则表达式的情况，也就是说我们平时传的 `include` 和 `exclude` 可以是这三种类型的任意一种。并且我们的组件名如果满足了配置 `include` 且不匹配或者是配置了 `exclude` 且匹配，那么就直接返回这个组件的 `vnode`，否则的话走下一步缓存：

const {  cache, keys } = this
    const key: ?string = vnode.key == null
      // same constructor may get registered as different local components
      // so cid alone is not enough (#3269)
      ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${ componentOptions.tag}` : '')
      : vnode.key
    if (cache[key]) { 
      vnode.componentInstance = cache[key].componentInstance
      // make current key freshest
      remove(keys, key)
      keys.push(key)
    } else { 
      cache[key] = vnode
      keys.push(key)
      // prune oldest entry
      if (this.max && keys.length > parseInt(this.max)) { 
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
      }
    }

1.  这部分逻辑很简单，如果命中缓存，则直接从缓存中拿 `vnode` 的组件实例，并且重新调整了 key 的顺序放在了最后一个；否则把 `vnode` 设置进缓存，最后还有一个逻辑，如果配置了 `max` 并且缓存的长度超过了 `this.max`，还要从缓存中删除第一个：

function pruneCacheEntry (
      cache: VNodeCache,
      key: string,
      keys: Array<string>,
      current?: VNode
    ) { 
      const cached = cache[key]
      if (cached && (!current || cached.tag !== current.tag)) { 
        cached.componentInstance.$destroy()
      }
      cache[key] = null 
      remove(keys, key)
    }

1.  除了从缓存中删除外，还要判断如果要删除的缓存并的组件 `tag` 不是当前渲染组件 `tag`，也执行删除缓存的组件实例的 `$destroy` 方法，最后设置 `vnode.data.keepAlive = true` 。注意，`<keep-alive>` 组件也是为观测 `include` 和 `exclude` 的变化，对缓存做处理：

watch: { 
      include (val: string | RegExp | Array<string>) { 
        pruneCache(this, name => matches(val, name))
      },
      exclude (val: string | RegExp | Array<string>) { 
        pruneCache(this, name => !matches(val, name))
      }
    }
    
    function pruneCache (keepAliveInstance: any, filter: Function) { 
      const {  cache, keys, _vnode } = keepAliveInstance
      for (const key in cache) { 
        const cachedNode: ?VNode = cache[key]
        if (cachedNode) { 
          const name: ?string = getComponentName(cachedNode.componentOptions)
          if (name && !filter(name)) { 
            pruneCacheEntry(cache, key, keys, _vnode)
          }
        }
      }
    }

> 逻辑很简单，观测他们的变化执行 `pruneCache` 函数，其实就是对 `cache` 做遍历，发现缓存的节点名称和新的规则没有匹配上的时候，就把这个缓存节点从缓存中摘除。

1.  组件渲染：了解了 `<keep-alive>` 的组件实现，但并不知道它包裹的子组件渲染和普通组件有什么不一样的地方。我们关注两个方面，首次渲染和缓存渲染。同样为了更好地理解，我们也结合一个示例来分析：

let A = { 
      template: '<div class="a">' +
      '<p>A Comp</p>' +
      '</div>',
      name: 'A'
    }
    
    let B = { 
      template: '<div class="b">' +
      '<p>B Comp</p>' +
      '</div>',
      name: 'B'
    }
    
    let vm = new Vue({ 
      el: '#app',
      template: '<div>' +
      '<keep-alive>' +
      '<component :is="currentComp">' +
      '</component>' +
      '</keep-alive>' +
      '<button @click="change">switch</button>' +
      '</div>',
      data: { 
        currentComp: 'A'
      },
      methods: { 
        change() { 
          this.currentComp = this.currentComp === 'A' ? 'B' : 'A'
        }
      },
      components: { 
        A,
        B
      }
    })

1.  首次渲染，我们知道 `Vue` 的渲染最后都会到 `patch` 过程，而组件的 `patch` 过程会执行 `createComponent` 方法，它的定义在 `src/core/vdom/patch.js` 中：

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) { 
      let i = vnode.data
      if (isDef(i)) { 
        const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
        if (isDef(i = i.hook) && isDef(i = i.init)) { 
          i(vnode, false /* hydrating */)
        }
        // after calling the init hook, if the vnode is a child component
        // it should've created a child instance and mounted it. the child
        // component also has set the placeholder vnode's elm.
        // in that case we can just return the element and be done.
        if (isDef(vnode.componentInstance)) { 
          initComponent(vnode, insertedVnodeQueue)
          insert(parentElm, vnode.elm, refElm)
          if (isTrue(isReactivated)) { 
            reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
          }
          return true
        }
      }
    }

1.  `createComponent` 定义了 `isReactivated` 的变量，它是根据 `vnode.componentInstance` 以及 `vnode.data.keepAlive` 的判断，第一次渲染的时候，`vnode.componentInstance` 为 `undefined`，`vnode.data.keepAlive` 为 true，因为它的父组件 `<keep-alive>` 的 `render` 函数会先执行，那么该 `vnode` 缓存到内存中，并且设置 `vnode.data.keepAlive` 为 true，因此 `isReactivated` 为 `false`，那么走正常的 `init` 的钩子函数执行组件的 `mount`。当 `vnode` 已经执行完 `patch` 后，执行 `initComponent` 函数：

function initComponent (vnode, insertedVnodeQueue) { 
      if (isDef(vnode.data.pendingInsert)) { 
        insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)
        vnode.data.pendingInsert = null
      }
      vnode.elm = vnode.componentInstance.$el
      if (isPatchable(vnode)) { 
        invokeCreateHooks(vnode, insertedVnodeQueue)
        setScope(vnode)
      } else { 
        // empty component root.
        // skip all element-related modules except for ref (#3455)
        registerRef(vnode)
        // make sure to invoke the insert hook
        insertedVnodeQueue.push(vnode)
      }
    }

1.  这里会有 `vnode.elm` 缓存了 `vnode` 创建生成的 `DOM` 节点。所以对于首次渲染而言，除了在 `<keep-alive>` 中建立缓存，和普通组件渲染没什么区别。所以对我们的例子，初始化渲染 `A` 组件以及第一次点击 `switch` 渲染 `B` 组件，都是首次渲染。
2.  缓存渲染，当我们从 `B` 组件再次点击 `switch` 切换到 `A` 组件，就会命中缓存渲染。我们之前分析过，当数据发送变化，在 `patch` 的过程中会执行 `patchVnode` 的逻辑，它会对比新旧 `vnode` 节点，甚至对比它们的子节点去做更新逻辑，但是对于组件 `vnode` 而言，是没有 `children` 的，那么对于 `<keep-alive>` 组件而言，如何更新它包裹的内容呢？原来 `patchVnode` 在做各种 `diff` 之前，会先执行 `prepatch` 的钩子函数，它的定义在 `src/core/vdom/create-component` 中：

const componentVNodeHooks = { 
      prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) { 
        const options = vnode.componentOptions
        const child = vnode.componentInstance = oldVnode.componentInstance
        updateChildComponent(
          child,
          options.propsData, // updated props
          options.listeners, // updated listeners
          vnode, // new parent vnode
          options.children // new children
        )
      },
      // ...
    }

> `prepatch` 核心逻辑就是执行 `updateChildComponent` 方法，它的定义在 `src/core/instance/lifecycle.js` 中：

export function updateChildComponent (
      vm: Component,
      propsData: ?Object,
      listeners: ?Object,
      parentVnode: MountedComponentVNode,
      renderChildren: ?Array<VNode>
    ) { 
      const hasChildren = !!(
        renderChildren ||          
        vm.$options._renderChildren ||
        parentVnode.data.scopedSlots || 
        vm.$scopedSlots !== emptyObject 
      )
    
      // ...
      if (hasChildren) { 
        vm.$slots = resolveSlots(renderChildren, parentVnode.context)
        vm.$forceUpdate()
      }
    }

1.  `updateChildComponent` 方法主要是去更新组件实例的一些属性，这里我们重点关注一下 `slot` 部分，由于 `<keep-alive>` 组件本质上支持了 `slot`，所以它执行 `prepatch` 的时候，需要对自己的 `children`，也就是这些 `slots` 做重新解析，并触发 `<keep-alive>` 组件实例 `$forceUpdate` 逻辑，也就是重新执行 `<keep-alive>` 的 `render` 方法，这个时候如果它包裹的第一个组件 `vnode` 命中缓存，则直接返回缓存中的 `vnode.componentInstance`，在我们的例子中就是缓存的 `A` 组件，接着又会执行 `patch` 过程，再次执行到 `createComponent` 方法，我们再回顾一下：

> 这个时候 `isReactivated` 为 true，并且在执行 `init` 钩子函数的时候不会再执行组件的 `mount` 过程了，相关逻辑在 `src/core/vdom/create-component.js` 中：

const componentVNodeHooks = { 
      init (vnode: VNodeWithData, hydrating: boolean): ?boolean { 
        if (
          vnode.componentInstance &&
          !vnode.componentInstance._isDestroyed &&
          vnode.data.keepAlive
        ) { 
          // kept-alive components, treat as a patch
          const mountedNode: any = vnode // work around flow
          componentVNodeHooks.prepatch(mountedNode, mountedNode)
        } else { 
          const child = vnode.componentInstance = createComponentInstanceForVnode(
            vnode,
            activeInstance
          )
          child.$mount(hydrating ? vnode.elm : undefined, hydrating)
        }
      },
      // ...
    }

> 这也就是被 `<keep-alive>` 包裹的组件在有缓存的时候就不会在执行组件的 `created`、`mounted` 等钩子函数的原因了。回到 `createComponent` 方法，在 `isReactivated` 为 true 的情况下会执行 `reactivateComponent` 方法：

function reactivateComponent (vnode, insertedVnodeQueue, parentElm, refElm) { 
      let i
      // hack for #4339: a reactivated component with inner transition
      // does not trigger because the inner node's created hooks are not called
      // again. It's not ideal to involve module-specific logic in here but
      // there doesn't seem to be a better way to do it.
      let innerNode = vnode
      while (innerNode.componentInstance) { 
        innerNode = innerNode.componentInstance._vnode
        if (isDef(i = innerNode.data) && isDef(i = i.transition)) { 
          for (i = 0; i < cbs.activate.length; ++i) { 
            cbs.activate[i](emptyNode, innerNode)
          }
          insertedVnodeQueue.push(innerNode)
          break
        }
      }
      // unlike a newly created component,
      // a reactivated keep-alive component doesn't insert itself
      insert(parentElm, vnode.elm, refElm)
    }

> 前面部分的逻辑是解决对 `reactived` 组件 `transition` 动画不触发的问题，可以先不关注，最后通过执行 `insert(parentElm, vnode.elm, refElm)` 就把缓存的 DOM 对象直接插入到目标元素中，这样就完成了在数据更新的情况下的渲染过程。

1.  生命周期，之前我们提到，组件一旦被 `<keep-alive>` 缓存，那么再次渲染的时候就不会执行 `created`、`mounted` 等钩子函数，但是我们很多业务场景都是希望在我们被缓存的组件再次被渲染的时候做一些事情，好在 `Vue` 提供了 `activated` 钩子函数，它的执行时机是 `<keep-alive>` 包裹的组件渲染的时候，接下来我们从源码角度来分析一下它的实现原理。在渲染的最后一步，会执行 `invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)` 函数执行 `vnode` 的 `insert` 钩子函数，它的定义在 `src/core/vdom/create-component.js` 中：

const componentVNodeHooks = { 
      insert (vnode: MountedComponentVNode) { 
        const {  context, componentInstance } = vnode
        if (!componentInstance._isMounted) { 
          componentInstance._isMounted = true
          callHook(componentInstance, 'mounted')
        }
        if (vnode.data.keepAlive) { 
          if (context._isMounted) { 
            // vue-router#1212
            // During updates, a kept-alive component's child components may
            // change, so directly walking the tree here may call activated hooks
            // on incorrect children. Instead we push them into a queue which will
            // be processed after the whole patch process ended.
            queueActivatedComponent(componentInstance)
          } else { 
            activateChildComponent(componentInstance, true /* direct */)
          }
        }
      },
      // ...
    }

1.  这里判断如果是被 `<keep-alive>` 包裹的组件已经 `mounted`，那么则执行 `queueActivatedComponent(componentInstance)` ，否则执行 `activateChildComponent(componentInstance, true)`。我们先分析非 `mounted` 的情况，`activateChildComponent` 的定义在 `src/core/instance/lifecycle.js` 中：

export function activateChildComponent (vm: Component, direct?: boolean) { 
      if (direct) { 
        vm._directInactive = false
        if (isInInactiveTree(vm)) { 
          return
        }
      } else if (vm._directInactive) { 
        return
      }
      if (vm._inactive || vm._inactive === null) { 
        vm._inactive = false
        for (let i = 0; i < vm.$children.length; i++) { 
          activateChildComponent(vm.$children[i])
        }
        callHook(vm, 'activated')
      }
    }

1.  可以看到这里就是执行组件的 `acitvated` 钩子函数，并且递归去执行它的所有子组件的 `activated` 钩子函数。那么再看 `queueActivatedComponent` 的逻辑，它定义在 `src/core/observer/scheduler.js` 中：

export function queueActivatedComponent (vm: Component) { 
      vm._inactive = false
      activatedChildren.push(vm)
    }

1.  这个逻辑很简单，把当前 `vm` 实例添加到 `activatedChildren` 数组中，等所有的渲染完毕，在 `nextTick`后会执行 `flushSchedulerQueue`，这个时候就会执行：

function flushSchedulerQueue () { 
      // ...
      const activatedQueue = activatedChildren.slice()
      callActivatedHooks(activatedQueue)
      // ...
    } 
    
    function callActivatedHooks (queue) { 
      for (let i = 0; i < queue.length; i++) { 
        queue[i]._inactive = true
        activateChildComponent(queue[i], true)  }
    }

1.  遍历所有的 `activatedChildren`，执行 `activateChildComponent` 方法，通过队列调的方式就是把整个 `activated` 时机延后了。有 `activated` 钩子函数，也就有对应的 `deactivated` 钩子函数，它是发生在 `vnode` 的 `destory` 钩子函数，定义在 `src/core/vdom/create-component.js` 中：

const componentVNodeHooks = { 
      destroy (vnode: MountedComponentVNode) { 
        const {  componentInstance } = vnode
        if (!componentInstance._isDestroyed) { 
          if (!vnode.data.keepAlive) { 
            componentInstance.$destroy()
          } else { 
            deactivateChildComponent(componentInstance, true /* direct */)
          }
        }
      }
    }

1.  对于 `<keep-alive>` 包裹的组件而言，它会执行 `deactivateChildComponent(componentInstance, true)` 方法，定义在 `src/core/instance/lifecycle.js` 中：

export function deactivateChildComponent (vm: Component, direct?: boolean) { 
      if (direct) { 
        vm._directInactive = true
        if (isInInactiveTree(vm)) { 
          return
        }
      }
      if (!vm._inactive) { 
        vm._inactive = true
        for (let i = 0; i < vm.$children.length; i++) { 
          deactivateChildComponent(vm.$children[i])
        }
        callHook(vm, 'deactivated')
      }
    }

> 和 `activateChildComponent` 方法类似，就是执行组件的 `deacitvated` 钩子函数，并且递归去执行它的所有子组件的 `deactivated` 钩子函数。

1.  总结：`<keep-alive>` 的实现原理就介绍完了，通过分析我们知道了 `<keep-alive>` 组件是一个抽象组件，它的实现通过自定义 `render` 函数并且利用了插槽，并且知道了 `<keep-alive>` 缓存 `vnode`，了解组件包裹的子元素——也就是插槽是如何做更新的。且在 `patch` 过程中对于已缓存的组件不会执行 `mounted`，所以不会有一般的组件的生命周期函数但是又提供了 `activated` 和 `deactivated` 钩子函数。另外我们还知道了 `<keep-alive>` 的 `props` 除了 `include` 和 `exclude` 还有文档中没有提到的 `max`，它能控制我们缓存的个数。

#### 二、transition 的理解 ####

1.  在我们平时的前端项目开发中，经常会遇到如下需求，一个 `DOM` 节点的插入和删除或者是显示和隐藏，我们不想让它特别生硬，通常会考虑加一些过渡效果。`Vue.js` 除了实现了强大的数据驱动，组件化的能力，也给我们提供了一整套过渡的解决方案。它内置了 `<transition>` 组件，我们可以利用它配合一些 `CSS3` 样式很方便地实现过渡动画，也可以利用它配合 `JavaScript` 的钩子函数实现过渡动画，在下列情形中，可以给任何元素和组件添加 `entering/leaving` 过渡，如下所示：

*  条件渲染 (使用 `v-if`)
 *  条件展示 (使用 `v-show`)
 *  动态组件
 *  组件根节点

1.  那么举一个最简单的实例，如下所示：

let vm = new Vue({ 
      el: '#app',
      template: '<div id="demo">' +
      '<button v-on:click="show = !show">' +
      'Toggle' +
      '</button>' +
      '<transition :appear="true" name="fade">' +
      '<p v-if="show">hello</p>' +
      '</transition>' +
      '</div>',
      data() { 
        return { 
          show: true
        }
      }
    })

.fade-enter-active, .fade-leave-active { 
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to { 
      opacity: 0;
    }

> 当我们点击按钮切换显示状态的时候，被 `<transition>` 包裹的内容会有过渡动画，那么接下来我们从源码的角度来分析它的实现原理。

1.  内置组件，`<transition>` 组件和 `<keep-alive>` 组件一样，都是 `Vue` 的内置组件，而 `<transition>` 的定义在 `src/platforms/web/runtime/component/transtion.js` 中，之所以在这里定义，是因为 `<transition>` 组件是 `web` 平台独有的，先来看一下它的实现：

export default { 
      name: 'transition',
      props: transitionProps,
      abstract: true,
    
      render (h: Function) { 
        let children: any = this.$slots.default
        if (!children) { 
          return
        }
    
        // filter out text nodes (possible whitespaces)
        children = children.filter((c: VNode) => c.tag || isAsyncPlaceholder(c))
        /* istanbul ignore if */
        if (!children.length) { 
          return
        }
    
        // warn multiple elements
        if (process.env.NODE_ENV !== 'production' && children.length > 1) { 
          warn(
            '<transition> can only be used on a single element. Use ' +
            '<transition-group> for lists.',
            this.$parent
          )
        }
    
        const mode: string = this.mode
    
        // warn invalid mode
        if (process.env.NODE_ENV !== 'production' &&
          mode && mode !== 'in-out' && mode !== 'out-in'
        ) { 
          warn(
            'invalid <transition> mode: ' + mode,
            this.$parent
          )
        }
    
        const rawChild: VNode = children[0]
    
        // if this is a component root node and the component's
        // parent container node also has transition, skip.
        if (hasParentTransition(this.$vnode)) { 
          return rawChild
        }
    
        // apply transition data to child
        // use getRealChild() to ignore abstract components e.g. keep-alive
        const child: ?VNode = getRealChild(rawChild)
        /* istanbul ignore if */
        if (!child) { 
          return rawChild
        }
    
        if (this._leaving) { 
          return placeholder(h, rawChild)
        }
    
        // ensure a key that is unique to the vnode type and to this transition
        // component instance. This key will be used to remove pending leaving nodes
        // during entering.
        const id: string = `__transition-${ this._uid}-`
        child.key = child.key == null
          ? child.isComment
            ? id + 'comment'
            : id + child.tag
          : isPrimitive(child.key)
            ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
            : child.key
    
        const data: Object = (child.data || (child.data = { })).transition = extractTransitionData(this)
        const oldRawChild: VNode = this._vnode
        const oldChild: VNode = getRealChild(oldRawChild)
    
        // mark v-show
        // so that the transition module can hand over the control to the directive
        if (child.data.directives && child.data.directives.some(d => d.name === 'show')) { 
          child.data.show = true
        }
    
        if (
          oldChild &&
          oldChild.data &&
          !isSameChild(child, oldChild) &&
          !isAsyncPlaceholder(oldChild) &&
          // #6687 component root is a comment node
          !(oldChild.componentInstance && oldChild.componentInstance._vnode.isComment)
        ) { 
          // replace old child transition data with fresh one
          // important for dynamic transitions!
          const oldData: Object = oldChild.data.transition = extend({ }, data)
          // handle transition mode
          if (mode === 'out-in') { 
            // return placeholder node and queue update when leave finishes
            this._leaving = true
            mergeVNodeHook(oldData, 'afterLeave', () => { 
              this._leaving = false
              this.$forceUpdate()
            })
            return placeholder(h, rawChild)
          } else if (mode === 'in-out') { 
            if (isAsyncPlaceholder(child)) { 
              return oldRawChild
            }
            let delayedLeave
            const performLeave = () => {  delayedLeave() }
            mergeVNodeHook(data, 'afterEnter', performLeave)
            mergeVNodeHook(data, 'enterCancelled', performLeave)
            mergeVNodeHook(oldData, 'delayLeave', leave => {  delayedLeave = leave })
          }
        }
    
        return rawChild
      }
    }

1.  `<transition>` 组件和 `<keep-alive>` 组件有几点实现类似，同样是抽象组件，同样直接实现 `render` 函数，同样利用了默认插槽。`<transition>` 组件非常灵活，支持的 `props` 非常多：

export const transitionProps = { 
      name: String,
      appear: Boolean,
      css: Boolean,
      mode: String,
      type: String,
      enterClass: String,
      leaveClass: String,
      enterToClass: String,
      leaveToClass: String,
      enterActiveClass: String,
      leaveActiveClass: String,
      appearClass: String,
      appearActiveClass: String,
      appearToClass: String,
      duration: [Number, String, Object]
    }

1.  这些配置我们稍后会分析它们的作用，`<transition>` 组件另一个重要的就是 `render` 函数的实现，`render` 函数主要作用就是渲染生成 `vnode`，下面来看一下这部分的逻辑，如下所示：

*  处理 `children`

let children: any = this.$slots.default
    if (!children) { 
      return
    }
    
    // filter out text nodes (possible whitespaces)
    children = children.filter((c: VNode) => c.tag || isAsyncPlaceholder(c))
    /* istanbul ignore if */
    if (!children.length) { 
      return
    }
    
    // warn multiple elements
    if (process.env.NODE_ENV !== 'production' && children.length > 1) { 
      warn(
        '<transition> can only be used on a single element. Use ' +
        '<transition-group> for lists.',
        this.$parent
      )
    }

> 先从默认插槽中获取 `<transition>` 包裹的子节点，并且判断了子节点的长度，如果长度为 0，则直接返回，否则判断长度如果大于 1，也会在开发环境报警告，因为 `<transition>` 组件是只能包裹一个子节点的。

*  处理 `model`

const mode: string = this.mode
    
    // warn invalid mode
    if (process.env.NODE_ENV !== 'production' &&
      mode && mode !== 'in-out' && mode !== 'out-in'
    ) { 
      warn(
        'invalid <transition> mode: ' + mode,
        this.$parent
      )
    }

> 过渡组件的对 `mode` 的支持只有 2 种，`in-out` 或者是 `out-in`。

*  获取 `rawChild` & `child`

const rawChild: VNode = children[0]
    
    // if this is a component root node and the component's
    // parent container node also has transition, skip.
    if (hasParentTransition(this.$vnode)) { 
      return rawChild
    }
    
    // apply transition data to child
    // use getRealChild() to ignore abstract components e.g. keep-alive
    const child: ?VNode = getRealChild(rawChild)
    /* istanbul ignore if */
    if (!child) { 
      return rawChild
    }

> `rawChild` 就是第一个子节点 `vnode`，接着判断当前 `<transition>` 如果是组件根节点并且外面包裹该组件的容器也是 `<transition>` 的时候要跳过。来看一下 `hasParentTransition` 的实现：

function hasParentTransition (vnode: VNode): ?boolean { 
      while ((vnode = vnode.parent)) { 
        if (vnode.data.transition) { 
          return true
        }
      }
    }

> 因为传入的是 `this.$vnode`，也就是 `<transition>` 组件的 占位 `vnode`，只有当它同时作为根 `vnode`，也就是 `vm._vnode` 的时候，它的 `parent` 才不会为空，并且判断 `parent` 也是 `<transition>` 组件，才返回 true，`vnode.data.transition` 我们稍后会介绍。`getRealChild` 的目的是获取组件的非抽象子节点，因为 `<transition>` 很可能会包裹一个 `keep-alive`，它的实现如下：

// in case the child is also an abstract component, e.g. <keep-alive>
    // we want to recursively retrieve the real component to be rendered
    function getRealChild (vnode: ?VNode): ?VNode { 
      const compOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
      if (compOptions && compOptions.Ctor.options.abstract) { 
        return getRealChild(getFirstComponentChild(compOptions.children))
      } else { 
        return vnode
      }
    }

> 会递归找到第一个非抽象组件的 `vnode` 并返回，在我们这个 case 下，`rawChild === child`。

*  处理 `id` & `data`

// ensure a key that is unique to the vnode type and to this transition
    // component instance. This key will be used to remove pending leaving nodes
    // during entering.
    const id: string = `__transition-${ this._uid}-`
    child.key = child.key == null
      ? child.isComment
        ? id + 'comment'
        : id + child.tag
      : isPrimitive(child.key)
        ? (String(child.key).indexOf(id) === 0 ? child.key : id + child.key)
        : child.key
    
    const data: Object = (child.data || (child.data = { })).transition = extractTransitionData(this)
    const oldRawChild: VNode = this._vnode
    const oldChild: VNode = getRealChild(oldRawChild)
    
    // mark v-show
    // so that the transition module can hand over the control to the directive
    if (child.data.directives && child.data.directives.some(d => d.name === 'show')) { 
      child.data.show = true
    }

> 先根据 `key` 等一系列条件获取 `id`，接着从当前通过 `extractTransitionData` 组件实例上提取出过渡所需要的数据：

export function extractTransitionData (comp: Component): Object { 
      const data = { }
      const options: ComponentOptions = comp.$options
      // props
      for (const key in options.propsData) { 
        data[key] = comp[key]
      }
      // events.
      // extract listeners and pass them directly to the transition methods
      const listeners: ?Object = options._parentListeners
      for (const key in listeners) { 
        data[camelize(key)] = listeners[key]
      }
      return data
    }

> 首先是遍历 `props` 赋值到 `data` 中，接着是遍历所有父组件的事件也把事件回调赋值到 `data` 中。这样 `child.data.transition` 中就包含了过渡所需的一些数据，这些稍后都会用到，对于 `child` 如果使用了 `v-show` 指令，也会把 `child.data.show` 设置为 true，在我们的例子中，得到的 `child.data` 如下：

{ 
      transition: { 
        appear: true,
        name: 'fade'
      }
    }

1.  `transition module`，刚刚我们介绍完 `<transition>` 组件的实现，它的 `render` 阶段只获取了一些数据，并且返回了渲染的 `vnode`，并没有任何和动画相关，而动画相关的逻辑全部在 `src/platforms/web/modules/transition.js` 中：

function _enter (_: any, vnode: VNodeWithData) { 
      if (vnode.data.show !== true) { 
        enter(vnode)
      }
    }
    
    export default inBrowser ? { 
      create: _enter,
      activate: _enter,
      remove (vnode: VNode, rm: Function) { 
        /* istanbul ignore else */
        if (vnode.data.show !== true) { 
          leave(vnode, rm)
        } else { 
          rm()
        }
      }
    } : { }

1.  在之前事件实现中我们提到过在 `vnode patch` 的过程中，会执行很多钩子函数，那么对于过渡的实现，它只接收了 `create` 和 `activate` 两个钩子函数，我们知道 `create` 钩子函数只有当节点的创建过程才会执行，而 `remove` 会在节点销毁的时候执行，这也就印证了 `<transition>` 必须要满足 `v-if` 、动态组件、组件根节点条件之一了，对于 `v-show` 在它的指令的钩子函数中也会执行相关逻辑。过渡动画提供了两个时机，一个是 `create` 和 `activate` 的时候提供了 `entering` 进入动画，一个是 `remove` 的时候提供了 `leaving` 离开动画，那么接下来我们就来分别去分析这两个过程。
2.  `entering`，整个 `entering` 过程的实现是 `enter` 函数：

export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) { 
      const el: any = vnode.elm
    
      // call leave callback now
      if (isDef(el._leaveCb)) { 
        el._leaveCb.cancelled = true
        el._leaveCb()
      }
    
      const data = resolveTransition(vnode.data.transition)
      if (isUndef(data)) { 
        return
      }
    
      /* istanbul ignore if */
      if (isDef(el._enterCb) || el.nodeType !== 1) { 
        return
      }
    
      const { 
        css,
        type,
        enterClass,
        enterToClass,
        enterActiveClass,
        appearClass,
        appearToClass,
        appearActiveClass,
        beforeEnter,
        enter,
        afterEnter,
        enterCancelled,
        beforeAppear,
        appear,
        afterAppear,
        appearCancelled,
        duration
      } = data
    
      // activeInstance will always be the <transition> component managing this
      // transition. One edge case to check is when the <transition> is placed
      // as the root node of a child component. In that case we need to check
      // <transition>'s parent for appear check.
      let context = activeInstance
      let transitionNode = activeInstance.$vnode
      while (transitionNode && transitionNode.parent) { 
        transitionNode = transitionNode.parent
        context = transitionNode.context
      }
    
      const isAppear = !context._isMounted || !vnode.isRootInsert
    
      if (isAppear && !appear && appear !== '') { 
        return
      }
    
      const startClass = isAppear && appearClass
        ? appearClass
        : enterClass
      const activeClass = isAppear && appearActiveClass
        ? appearActiveClass
        : enterActiveClass
      const toClass = isAppear && appearToClass
        ? appearToClass
        : enterToClass
    
      const beforeEnterHook = isAppear
        ? (beforeAppear || beforeEnter)
        : beforeEnter
      const enterHook = isAppear
        ? (typeof appear === 'function' ? appear : enter)
        : enter
      const afterEnterHook = isAppear
        ? (afterAppear || afterEnter)
        : afterEnter
      const enterCancelledHook = isAppear
        ? (appearCancelled || enterCancelled)
        : enterCancelled
    
      const explicitEnterDuration: any = toNumber(
        isObject(duration)
          ? duration.enter
          : duration
      )
    
      if (process.env.NODE_ENV !== 'production' && explicitEnterDuration != null) { 
        checkDuration(explicitEnterDuration, 'enter', vnode)
      }
    
      const expectsCSS = css !== false && !isIE9
      const userWantsControl = getHookArgumentsLength(enterHook)
    
      const cb = el._enterCb = once(() => { 
        if (expectsCSS) { 
          removeTransitionClass(el, toClass)
          removeTransitionClass(el, activeClass)
        }
        if (cb.cancelled) { 
          if (expectsCSS) { 
            removeTransitionClass(el, startClass)
          }
          enterCancelledHook && enterCancelledHook(el)
        } else { 
          afterEnterHook && afterEnterHook(el)
        }
        el._enterCb = null
      })
    
      if (!vnode.data.show) { 
        // remove pending leave element on enter by injecting an insert hook
        mergeVNodeHook(vnode, 'insert', () => { 
          const parent = el.parentNode
          const pendingNode = parent && parent._pending && parent._pending[vnode.key]
          if (pendingNode &&
            pendingNode.tag === vnode.tag &&
            pendingNode.elm._leaveCb
          ) { 
            pendingNode.elm._leaveCb()
          }
          enterHook && enterHook(el, cb)
        })
      }
    
      // start enter transition
      beforeEnterHook && beforeEnterHook(el)
      if (expectsCSS) { 
        addTransitionClass(el, startClass)
        addTransitionClass(el, activeClass)
        nextFrame(() => { 
          removeTransitionClass(el, startClass)
          if (!cb.cancelled) { 
            addTransitionClass(el, toClass)
            if (!userWantsControl) { 
              if (isValidDuration(explicitEnterDuration)) { 
                setTimeout(cb, explicitEnterDuration)
              } else { 
                whenTransitionEnds(el, type, cb)
              }
            }
          }
        })
      }
    
      if (vnode.data.show) { 
        toggleDisplay && toggleDisplay()
        enterHook && enterHook(el, cb)
      }
    
      if (!expectsCSS && !userWantsControl) { 
        cb()
      }
    }

1.  `enter` 的代码很长，我们先分析其中的核心逻辑，如下所示：

*  解析过渡数据

const data = resolveTransition(vnode.data.transition)
      if (isUndef(data)) { 
        return
    }
    
    const { 
      css,
      type,
      enterClass,
      enterToClass,
      enterActiveClass,
      appearClass,
      appearToClass,
      appearActiveClass,
      beforeEnter,
      enter,
      afterEnter,
      enterCancelled,
      beforeAppear,
      appear,
      afterAppear,
      appearCancelled,
      duration
    } = data

> 从 `vnode.data.transition` 中解析出过渡相关的一些数据，`resolveTransition` 的定义在 `src/platforms/web/transition-util.js` 中：

export function resolveTransition (def?: string | Object): ?Object { 
      if (!def) { 
        return
      }
      /* istanbul ignore else */
      if (typeof def === 'object') { 
        const res = { }
        if (def.css !== false) { 
          extend(res, autoCssTransition(def.name || 'v'))
        }
        extend(res, def)
        return res
      } else if (typeof def === 'string') { 
        return autoCssTransition(def)
      }
    }
    
    const autoCssTransition: (name: string) => Object = cached(name => { 
      return { 
        enterClass: `${ name}-enter`,
        enterToClass: `${ name}-enter-to`,
        enterActiveClass: `${ name}-enter-active`,
        leaveClass: `${ name}-leave`,
        leaveToClass: `${ name}-leave-to`,
        leaveActiveClass: `${ name}-leave-active`
      }
    })

> `resolveTransition` 会通过 `autoCssTransition` 处理 `name` 属性，生成一个用来描述各个阶段的 `Class` 名称的对象，扩展到 `def` 中并返回给 `data`，这样我们就可以从 `data` 中获取到过渡相关的所有数据。

*  处理边界情况

// activeInstance will always be the <transition> component managing this
    // transition. One edge case to check is when the <transition> is placed
    // as the root node of a child component. In that case we need to check
    // <transition>'s parent for appear check.
    let context = activeInstance
    let transitionNode = activeInstance.$vnode
    while (transitionNode && transitionNode.parent) { 
      transitionNode = transitionNode.parent
      context = transitionNode.context
    }
    
    const isAppear = !context._isMounted || !vnode.isRootInsert
    
    if (isAppear && !appear && appear !== '') { 
      return
    }

> 这是为了处理当 `<transition>` 作为子组件的根节点，那么我们需要检查它的父组件作为 `appear` 的检查。`isAppear` 表示当前上下文实例还没有 `mounted`，第一次出现的时机。如果是第一次并且 `<transition>` 组件没有配置 `appear` 的话，直接返回。

*  定义过渡类名、钩子函数和其它配置

const startClass = isAppear && appearClass
        ? appearClass
        : enterClass
    const activeClass = isAppear && appearActiveClass
      ? appearActiveClass
      : enterActiveClass
    const toClass = isAppear && appearToClass
      ? appearToClass
      : enterToClass
    
    const beforeEnterHook = isAppear
      ? (beforeAppear || beforeEnter)
      : beforeEnter
    const enterHook = isAppear
      ? (typeof appear === 'function' ? appear : enter)
      : enter
    const afterEnterHook = isAppear
      ? (afterAppear || afterEnter)
      : afterEnter
    const enterCancelledHook = isAppear
      ? (appearCancelled || enterCancelled)
      : enterCancelled
    
    const explicitEnterDuration: any = toNumber(
      isObject(duration)
        ? duration.enter
        : duration
    )
    
    if (process.env.NODE_ENV !== 'production' && explicitEnterDuration != null) { 
      checkDuration(explicitEnterDuration, 'enter', vnode)
    }
    
    const expectsCSS = css !== false && !isIE9
    const userWantsControl = getHookArgumentsLength(enterHook)
    
    const cb = el._enterCb = once(() => { 
      if (expectsCSS) { 
        removeTransitionClass(el, toClass)
        removeTransitionClass(el, activeClass)
      }
      if (cb.cancelled) { 
        if (expectsCSS) { 
          removeTransitionClass(el, startClass)
        }
        enterCancelledHook && enterCancelledHook(el)
      } else { 
        afterEnterHook && afterEnterHook(el)
      }
      el._enterCb = null
    })

> 对于过渡类名方面，`startClass` 定义进入过渡的开始状态，在元素被插入时生效，在下一个帧移除；`activeClass` 定义过渡的状态，在元素整个过渡过程中作用，在元素被插入时生效，在 `transition/animation` 完成之后移除；`toClass` 定义进入过渡的结束状态，在元素被插入一帧后生效 (与此同时 `startClass` 被删除)，在 `<transition>/animation` 完成之后移除。

> 对于过渡钩子函数方面，`beforeEnterHook` 是过渡开始前执行的钩子函数，`enterHook` 是在元素插入后或者是 `v-show` 显示切换后执行的钩子函数。`afterEnterHook` 是在过渡动画执行完后的钩子函数。

> `explicitEnterDuration` 表示 enter 动画执行的时间。`expectsCSS` 表示过渡动画是受 CSS 的影响。`cb` 定义的是过渡完成执行的回调函数。

*  合并 `insert` 钩子函数

if (!vnode.data.show) { 
      // remove pending leave element on enter by injecting an insert hook
      mergeVNodeHook(vnode, 'insert', () => { 
        const parent = el.parentNode
        const pendingNode = parent && parent._pending && parent._pending[vnode.key]
        if (pendingNode &&
          pendingNode.tag === vnode.tag &&
          pendingNode.elm._leaveCb
        ) { 
          pendingNode.elm._leaveCb()
        }
        enterHook && enterHook(el, cb)
      })
    }

> `mergeVNodeHook` 的定义在 `src/core/vdom/helpers/merge-hook.js` 中：

export function mergeVNodeHook (def: Object, hookKey: string, hook: Function) { 
      if (def instanceof VNode) { 
        def = def.data.hook || (def.data.hook = { })
      }
      let invoker
      const oldHook = def[hookKey]
    
      function wrappedHook () { 
        hook.apply(this, arguments)
        // important: remove merged hook to ensure it's called only once
        // and prevent memory leak
        remove(invoker.fns, wrappedHook)
      }
    
      if (isUndef(oldHook)) { 
        // no existing hook
        invoker = createFnInvoker([wrappedHook])
      } else { 
        /* istanbul ignore if */
        if (isDef(oldHook.fns) && isTrue(oldHook.merged)) { 
          // already a merged invoker
          invoker = oldHook
          invoker.fns.push(wrappedHook)
        } else { 
          // existing plain hook
          invoker = createFnInvoker([oldHook, wrappedHook])
        }
      }
    
      invoker.merged = true
      def[hookKey] = invoker
    }

> `mergeVNodeHook` 的逻辑很简单，就是把 `hook` 函数合并到 `def.data.hook[hookey]` 中，生成新的 `invoker`，`createFnInvoker` 方法我们在分析事件的时候已经介绍过了。  
> 我们之前知道组件的 `vnode` 原本定义了 `init`、`prepatch`、`insert`、`destroy` 四个钩子函数，而 `mergeVNodeHook` 函数就是把一些新的钩子函数合并进来，例如在 `<transition>` 过程中合并的 `insert` 钩子函数，就会合并到组件 `vnode` 的 `insert` 钩子函数中，这样当组件插入后，就会执行我们定义的 `enterHook` 了。

*  开始执行过渡动画

// start enter transition
    beforeEnterHook && beforeEnterHook(el)
    if (expectsCSS) { 
      addTransitionClass(el, startClass)
      addTransitionClass(el, activeClass)
      nextFrame(() => { 
        removeTransitionClass(el, startClass)
        if (!cb.cancelled) { 
          addTransitionClass(el, toClass)
          if (!userWantsControl) { 
            if (isValidDuration(explicitEnterDuration)) { 
              setTimeout(cb, explicitEnterDuration)
            } else { 
              whenTransitionEnds(el, type, cb)
            }
          }
        }
      })
    }

> 首先执行 `beforeEnterHook` 钩子函数，把当前元素的 DOM 节点 `el` 传入，然后判断 `expectsCSS`，如果为 true 则表明希望用 CSS 来控制动画，那么会执行 `addTransitionClass(el, startClass)` 和 `addTransitionClass(el, activeClass)`，它的定义在 `src/platforms/runtime/transition-util.js` 中：

export function addTransitionClass (el: any, cls: string) { 
      const transitionClasses = el._transitionClasses || (el._transitionClasses = [])
      if (transitionClasses.indexOf(cls) < 0) { 
        transitionClasses.push(cls)
        addClass(el, cls)
      }
    }

> 其实非常简单，就是给当前 DOM 元素 `el` 添加样式 `cls`，所以这里添加了 `startClass` 和 `activeClass`，在我们的例子中就是给 `p` 标签添加了 `fade-enter` 和 `fade-enter-active` 2 个样式。接下来执行了 `nextFrame`：

const raf = inBrowser
      ? window.requestAnimationFrame
        ? window.requestAnimationFrame.bind(window)
        : setTimeout
      : fn => fn()
    
    export function nextFrame (fn: Function) { 
      raf(() => { 
        raf(fn)
      })
    }

> 它就是一个简单的 `requestAnimationFrame` 的实现，它的参数 fn 会在下一帧执行，因此下一帧执行了 `removeTransitionClass(el, startClass)`：

export function removeTransitionClass (el: any, cls: string) { 
      if (el._transitionClasses) { 
        remove(el._transitionClasses, cls)
      }
      removeClass(el, cls)
    }

> 把 `startClass` 移除，在我们的等例子中就是移除 `fade-enter` 样式。然后判断此时过渡没有被取消，则执行 `addTransitionClass(el, toClass)` 添加 `toClass`，在我们的例子中就是添加了 `fade-enter-to`。然后判断 `!userWantsControl`，也就是用户不通过 `enterHook` 钩子函数控制动画，这时候如果用户指定了 `explicitEnterDuration`，则延时这个时间执行 `cb`，否则通过 `whenTransitionEnds(el, type, cb)` 决定执行 `cb` 的时机：

export function whenTransitionEnds (
      el: Element,
      expectedType: ?string,
      cb: Function
    ) { 
      const {  type, timeout, propCount } = getTransitionInfo(el, expectedType)
      if (!type) return cb()
      const event: string = type === <transition> ? transitionEndEvent : animationEndEvent
      let ended = 0
      const end = () => { 
        el.removeEventListener(event, onEnd)
        cb()
      }
      const onEnd = e => { 
        if (e.target === el) { 
          if (++ended >= propCount) { 
            end()
          }
        }
      }
      setTimeout(() => { 
        if (ended < propCount) { 
          end()
        }
      }, timeout + 1)
      el.addEventListener(event, onEnd)
    }

> `whenTransitionEnds` 的逻辑具体不深讲了，本质上就利用了过渡动画的结束事件来决定 `cb` 函数的执行，最后再回到 `cb` 函数：

const cb = el._enterCb = once(() => { 
      if (expectsCSS) { 
        removeTransitionClass(el, toClass)
        removeTransitionClass(el, activeClass)
      }
      if (cb.cancelled) { 
        if (expectsCSS) { 
          removeTransitionClass(el, startClass)
        }
        enterCancelledHook && enterCancelledHook(el)
      } else { 
        afterEnterHook && afterEnterHook(el)
      }
      el._enterCb = null
    })

> 执行了 `removeTransitionClass(el, toClass)` 和 `removeTransitionClass(el, activeClass)` 把 `toClass` 和 `activeClass` 移除，然后判断如果有没有取消，如果取消则移除 `startClass` 并执行 `enterCancelledHook`，否则执行 `afterEnterHook(el)`。

1.  `leaving`，与 `entering` 相对的就是 `leaving` 阶段了，`entering` 主要发生在组件插入后，而 `leaving` 主要发生在组件销毁前，如下所示：

export function leave (vnode: VNodeWithData, rm: Function) { 
      const el: any = vnode.elm
    
      // call enter callback now
      if (isDef(el._enterCb)) { 
        el._enterCb.cancelled = true
        el._enterCb()
      }
    
      const data = resolveTransition(vnode.data.transition)
      if (isUndef(data) || el.nodeType !== 1) { 
        return rm()
      }
    
      /* istanbul ignore if */
      if (isDef(el._leaveCb)) { 
        return
      }
    
      const { 
        css,
        type,
        leaveClass,
        leaveToClass,
        leaveActiveClass,
        beforeLeave,
        leave,
        afterLeave,
        leaveCancelled,
        delayLeave,
        duration
      } = data
    
      const expectsCSS = css !== false && !isIE9
      const userWantsControl = getHookArgumentsLength(leave)
    
      const explicitLeaveDuration: any = toNumber(
        isObject(duration)
          ? duration.leave
          : duration
      )
    
      if (process.env.NODE_ENV !== 'production' && isDef(explicitLeaveDuration)) { 
        checkDuration(explicitLeaveDuration, 'leave', vnode)
      }
    
      const cb = el._leaveCb = once(() => { 
        if (el.parentNode && el.parentNode._pending) { 
          el.parentNode._pending[vnode.key] = null
        }
        if (expectsCSS) { 
          removeTransitionClass(el, leaveToClass)
          removeTransitionClass(el, leaveActiveClass)
        }
        if (cb.cancelled) { 
          if (expectsCSS) { 
            removeTransitionClass(el, leaveClass)
          }
          leaveCancelled && leaveCancelled(el)
        } else { 
          rm()
          afterLeave && afterLeave(el)
        }
        el._leaveCb = null
      })
    
      if (delayLeave) { 
        delayLeave(performLeave)
      } else { 
        performLeave()
      }
    
      function performLeave () { 
        // the delayed leave may have already been cancelled
        if (cb.cancelled) { 
          return
        }
        // record leaving element
        if (!vnode.data.show) { 
          (el.parentNode._pending || (el.parentNode._pending = { }))[(vnode.key: any)] = vnode
        }
        beforeLeave && beforeLeave(el)
        if (expectsCSS) { 
          addTransitionClass(el, leaveClass)
          addTransitionClass(el, leaveActiveClass)
          nextFrame(() => { 
            removeTransitionClass(el, leaveClass)
            if (!cb.cancelled) { 
              addTransitionClass(el, leaveToClass)
              if (!userWantsControl) { 
                if (isValidDuration(explicitLeaveDuration)) { 
                  setTimeout(cb, explicitLeaveDuration)
                } else { 
                  whenTransitionEnds(el, type, cb)
                }
              }
            }
          })
        }
        leave && leave(el, cb)
        if (!expectsCSS && !userWantsControl) { 
          cb()
        }
      }
    }

1.  纵观 `leave` 的实现，和 `enter` 的实现几乎是一个镜像过程，不同的是从 `data` 中解析出来的是 `leave` 相关的样式类名和钩子函数。还有一点不同是可以配置 `delayLeave`，它是一个函数，可以延时执行 `leave` 的相关过渡动画，在 `leave` 动画执行完后，它会执行 `rm` 函数把节点从 DOM 中真正做移除。
2.  总结：基本的 `<transition>` 过渡的实现分析完毕了，总结起来，`Vue` 的过渡实现分为以下几个步骤：

*  自动嗅探目标元素是否应用了 `CSS` 过渡或动画，如果是，在恰当的时机添加/删除 `CSS` 类名。
 *  如果过渡组件提供了 `JavaScript` 钩子函数，这些钩子函数将在恰当的时机被调用。
 *  如果没有找到 `JavaScript` 钩子并且也没有检测到 `CSS` 过渡/动画，`DOM` 操作 (插入/删除) 在下一帧中立即执行。
 *  所以真正执行动画的是我们写的 `CSS` 或者是 `JavaScript` 钩子函数，而 `Vue` 的 `<transition>` 只是帮我们很好地管理了这些 `CSS` 的添加/删除，以及钩子函数的执行时机。

#### 三、transition-group 的理解 ####

1.  之前我们介绍了 `<transiiton>` 组件的实现原理，它只能针对单一元素实现过渡效果。我们做前端开发经常会遇到列表的需求，我们对列表元素进行添加和删除，有时候也希望有过渡效果，`Vue.js` 提供了 `<transition-group>` 组件，很好地帮助我们实现了列表的过渡效果。那么接下来我们就来分析一下它的实现原理。为了更直观，我们也是通过一个示例来说明：

let vm = new Vue({ 
      el: '#app',
      template: '<div id="list-complete-demo" class="demo">' +
      '<button v-on:click="add">Add</button>' +
      '<button v-on:click="remove">Remove</button>' +
      '<transition-group name="list-complete" tag="p">' +
      '<span v-for="item in items" v-bind:key="item" class="list-complete-item">' +
      '{ { item }}' +
      '</span>' +
      '</transition-group>' +
      '</div>',
      data: { 
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        nextNum: 10
      },
      methods: { 
        randomIndex: function () { 
          return Math.floor(Math.random() * this.items.length)
        },
        add: function () { 
          this.items.splice(this.randomIndex(), 0, this.nextNum++)
        },
        remove: function () { 
          this.items.splice(this.randomIndex(), 1)
        }
      }
    })

.list-complete-item { 
      display: inline-block;
      margin-right: 10px;
    }
    .list-complete-move { 
      transition: all 1s;
    }
    .list-complete-enter, .list-complete-leave-to { 
      opacity: 0;
      transform: translateY(30px);
    }
    .list-complete-enter-active { 
      transition: all 1s;
    }
    .list-complete-leave-active { 
      transition: all 1s;
      position: absolute;
    }

1.  这个示例初始会展现 `1-9` 十个数字，当我们点击 `Add` 按钮时，会生成 `nextNum` 并随机在当前数列表中插入；当我们点击 `Remove` 按钮时，会随机删除掉一个数。我们会发现在数添加删除的过程中在列表中会有过渡动画，这就是 `<transition-group>` 组件配合我们定义的 `CSS` 产生的效果。我们首先还是来分析 `<transtion-group>` 组件的实现，它的定义在 `src/platforms/web/runtime/components/transitions.js` 中：

1.  `render` 函数，`<transition-group>` 组件也是由 `render` 函数渲染生成 `vnode`，接下来我们先分析 `render` 的实现，如下所示：

*  定义一些变量

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)

> 不同于 `<transition>` 组件，`<transition-group>` 组件非抽象组件，它会渲染成一个真实元素，默认 `tag` 是 `span`。 `prevChildren` 用来存储上一次的子节点；`children` 用来存储当前的子节点；`rawChildren` 表示 `<transtition-group>` 包裹的原始子节点；`transtionData` 是从 `<transtition-group>` 组件上提取出来的一些渲染数据，这点和 `<transition>` 组件的实现是一样的。

*  遍历 `rawChidren`，初始化 `children`

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: ?VNodeComponentOptions = c.componentOptions
          const name: string = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag
          warn(`<transition-group> children must be keyed: <${ name}>`)
        }
      }
    }

> 其实就是对 `rawChildren` 遍历，拿到每个 `vnode`，然后会判断每个 `vnode` 是否设置了 `key`，这个是 `<transition-group>` 对列表元素的要求。然后把 `vnode` 添加到 `children` 中，然后把刚刚提取的过渡数据 `transitionData` 添加的 `vnode.data.transition` 中，这点很关键，只有这样才能实现列表中单个元素的过渡动画。

*  处理 `prevChildren`

if (prevChildren) { 
      const kept: Array<VNode> = []
      const removed: Array<VNode> = []
      for (let i = 0; i < prevChildren.length; i++) { 
        const c: VNode = prevChildren[i]
        c.data.transition = transitionData
        c.data.pos = c.elm.getBoundingClientRect()
        if (map[c.key]) { 
          kept.push(c)
        } else { 
          removed.push(c)
        }
      }
      this.kept = h(tag, null, kept)
      this.removed = removed
    }
    
    return h(tag, null, children)

1.  当有 `prevChildren` 的时候，我们会对它做遍历，获取到每个 `vnode`，然后把 `transitionData` 赋值到 `vnode.data.transition`，这个是为了当它在 `enter` 和 `leave` 的钩子函数中有过渡动画，我们在上节介绍 `transition` 的实现中说过。接着又调用了原生 `DOM` 的 `getBoundingClientRect` 方法获取到原生 `DOM` 的位置信息，记录到 `vnode.data.pos` 中，然后判断一下 `vnode.key` 是否在 `map` 中，如果在则放入 `kept` 中，否则表示该节点已被删除，放入 `removed` 中，然后通过执行 `h(tag, null, kept)` 渲染后放入 `this.kept` 中，把 `removed` 用 `this.removed` 保存。最后整个 `render` 函数通过 `h(tag, null, children)` 生成渲染 `vnode`。
2.  如果 `transition-group` 只实现了这个 `render` 函数，那么每次插入和删除的元素的缓动动画是可以实现的，在我们的例子中，当新增一个元素，它的插入的过渡动画是有的，但是剩余元素平移的过渡效果是出不来的，所以接下来我们来分析 `<transition-group>` 组件是如何实现剩余元素平移的过渡效果的。
3.  `move` 过渡实现，其实我们在实现元素的插入和删除，无非就是操作数据，控制它们的添加和删除。比如我们新增数据的时候，会添加一条数据，除了重新执行 `render` 函数渲染新的节点外，还要触发 `updated` 钩子函数，接着我们就来分析 `updated` 钩子函数的实现，如下所示：

*  判断子元素是否定义 `move` 相关样式

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
    }
    
    hasMove (el: any, moveClass: string): boolean { 
      /* istanbul ignore if */
      if (!hasTransition) { 
        return false
      }
      /* istanbul ignore if */
      if (this._hasMove) { 
        return this._hasMove
      }
      // Detect whether an element with the move class applied has
      // CSS transitions. Since the element may be inside an entering
      // transition at this very moment, we make a clone of it and remove
      // all other transition classes applied to ensure only the move class
      // is applied.
      const clone: HTMLElement = el.cloneNode()
      if (el._transitionClasses) { 
        el._transitionClasses.forEach((cls: string) => {  removeClass(clone, cls) })
      }
      addClass(clone, moveClass)
      clone.style.display = 'none'
      this.$el.appendChild(clone)
      const info: Object = getTransitionInfo(clone)
      this.$el.removeChild(clone)
      return (this._hasMove = info.hasTransform)
    }

> 核心就是 `hasMove` 的判断，首先克隆一个 DOM 节点，然后为了避免影响，移除它的所有其他的过渡 `Class`；接着添加了 `moveClass` 样式，设置 `display` 为 `none`，添加到组件根节点上；接下来通过 `getTransitionInfo` 获取它的一些缓动相关的信息，这个函数在上一节我们也介绍过，然后从组件根节点上删除这个克隆节点，并通过判断 `info.hasTransform` 来判断 `hasMove`，在我们的例子中，该值为 `true`。

*  子节点预处理

children.forEach(callPendingCbs)
    children.forEach(recordPosition)
    children.forEach(applyTranslation)

> 对 `children` 做了 3 轮循环，分别做了如下一些处理：

function callPendingCbs (c: VNode) { 
      if (c.elm._moveCb) { 
        c.elm._moveCb()
      }
      if (c.elm._enterCb) { 
        c.elm._enterCb()
      }
    }
    
    function recordPosition (c: VNode) { 
      c.data.newPos = c.elm.getBoundingClientRect()
    }
    
    function applyTranslation (c: VNode) { 
      const oldPos = c.data.pos
      const newPos = c.data.newPos
      const dx = oldPos.left - newPos.left
      const dy = oldPos.top - newPos.top
      if (dx || dy) { 
        c.data.moved = true
        const s = c.elm.style
        s.transform = s.WebkitTransform = `translate(${ dx}px,${ dy}px)`
        s.transitionDuration = '0s'
      }
    }

> `callPendingCbs` 方法是在前一个过渡动画没执行完又再次执行到该方法的时候，会提前执行 `_moveCb` 和 `_enterCb`。

> `recordPosition` 的作用是记录节点的新位置。

> `applyTranslation` 的作用是先计算节点新位置和旧位置的差值，如果差值不为 0，则说明这些节点是需要移动的，所以记录 `vnode.data.moved` 为 true，并且通过设置 `transform` 把需要移动的节点的位置又偏移到之前的旧位置，目的是为了做 `move` 缓动做准备。

*  遍历子元素实现 `move` 过渡

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

1.  首先通过 `document.body.offsetHeight` 强制触发浏览器重绘，接着再次对 `children` 遍历，先给子节点添加 `moveClass`，在我们的例子中，`moveClass` 定义了 `transition: all 1s;` 缓动；接着把子节点的 `style.transform` 设置为空，由于我们前面把这些节点偏移到之前的旧位置，所以它就会从旧位置按照 `1s` 的缓动时间过渡偏移到它的当前目标位置，这样就实现了 `move` 的过渡动画。并且接下来会监听 `transitionEndEvent` 过渡结束的事件，做一些清理的操作。
2.  另外，由于虚拟 `DOM` 的子元素更新算法是不稳定的，它不能保证被移除元素的相对位置，所以我们强制 `<transition-group>` 组件更新子节点通过两个步骤：第一步我们移除需要移除的 `vnode`，同时触发它们的 `leaving` 过渡；第二步我们需要把插入和移动的节点达到它们的最终态，同时还要保证移除的节点保留在应该的位置，而这个是通过 `beforeMount` 钩子函数来实现的：

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

> 通过把 `__patch__` 方法的第四个参数 `removeOnly` 设置为 true，这样在 `updateChildren` 阶段，是不会移动 `vnode` 节点的。

1.  总结：`<transtion-group>` 组件的实现原理就介绍完毕了，它和 `<transition>` 组件相比，实现了列表的过渡，以及它会渲染成真实的元素。当我们去修改列表的数据的时候，如果是添加或者删除数据，则会触发相应元素本身的过渡动画，这点和 `<transition>` 组件实现效果一样，除此之外 `<transtion-group>` 还实现了 `move` 的过渡效果，让我们的列表过渡动画更加丰富。