基本用法

  1. <keep-alive>
  2. -  <div>123</div>
  3. +  <component :is="switchOne ? 'TabOne' : 'TabTwo'" />
  4. -  <component :is="switchOne ? 'TabTwo' : 'TabOne'" />
  5. </keep-alive>
  • keep-alive 只会去缓存 第一级 的 第一个 组件
  • 我们可以通过 include / exclude / max 来对缓存进行更小颗粒的控制
  • 缓存的组件在切换的时候会触发 activated / deactivated 的生命周期函数

组件实现原理

  1. export default {
  2.   name: 'keep-alive',
  3.   abstract: true,
  5.   props: {
  6.     include: patternTypes,
  7.     exclude: patternTypes,
  8.     max: [String, Number]
  9.   },
  11.   created () {
  12.     // 创建缓存队列以及其对应的 key 值队列
  13.     this.cache = Object.create(null)
  14.     this.keys = []
  15.   },
  17.   destroyed () {
  18.     // 销毁所有已经保存的组件实例
  19.     for (const key in this.cache) {
  20.       pruneCacheEntry(this.cache, key, this.keys)
  21.     }
  22.   },
  24.   mounted () {
  25.     // 监听 include / exclued，用于让缓存队列保持一致性
  26.     this.$watch('include', val => {
  27.       pruneCache(this, name => matches(val, name))
  28.     })
  29.     this.$watch('exclude', val => {
  30.       pruneCache(this, name => !matches(val, name))
  31.     })
  32.   },
  34.   render () {
  35.     // 从 $slot 中获取 keep-alive 的 children
  36.     const slot = this.$slots.default
  37.     // 找到第一个组件的最新的 VNode
  38.     const vnode: VNode = getFirstComponentChild(slot)
  39.     // 获取其配置信息
  40.     const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  41.     if (componentOptions) {
  42.       // 被捕获的组件名称
  43.       const name: ?string = getComponentName(componentOptions)
  44.       // 如果不在缓存的目标范围内，则直接返回新的 VNode
  45.       const { include, exclude } = this
  46.       if (
  47.         // not included
  48.         (include && (!name || !matches(include, name))) ||
  49.         // excluded
  50.         (exclude && name && matches(exclude, name))
  51.       ) {
  52.         return vnode
  53.       }
  55.       const { cache, keys } = this
  56.       // 获得组件对应的 key 值
  57.       const key: ?string = vnode.key == null
  58.         ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  59.         : vnode.key
  61.       // LRU 缓存操作，如果缓存中存在对应的实例，则将实例注入到 VNode 中
  62.       if (cache[key]) {
  63.         vnode.componentInstance = cache[key].componentInstance
  64.         // make current key freshest
  65.         remove(keys, key)
  66.         keys.push(key)
  67.       } else {
  68.         cache[key] = vnode
  69.         keys.push(key)
  70.         // prune oldest entry
  71.         if (this.max && keys.length > parseInt(this.max)) {
  72.           pruneCacheEntry(cache, keys[0], keys, this._vnode)
  73.         }
  74.       }
  76.       // 标注 keepAlive，方便 Vue 配合
  77.       vnode.data.keepAlive = true
  78.     }
  80.     // 返回
  81.     return vnode || (slot && slot[0])
  82.   }
  83. }

缓存核心操作的内容其实是 componentInstance，如果已经初始化过对应的实例则不用初始化，直接取出即可。

Vue 内部是如何配合的

先明确一下正常组件实例化的过程：

  • AST（编译 template）
  • CodeGen（生成 render 函数）
  • VNode（通过 render 获得组件 VNode，并将组件的构造函数存到 VNode 中）
  • Patch
    • 新增节点（通过 VNode 中的构造函数初始化组件）
    • 更新节点（基于旧的组件实例更新其状态）
    • 删除节点


如果没有 keep-alive，组件在进行切换到时候，Vue 在 patch 会认为是新增的节点而重新创建组件实例，从而导致先前可能存在状态会被清空。
如果有 keep-alive，切换节点操作最后 patch 还是会走到 新增节点 **的逻辑，但是不一样的是，新的 VNode 中已经有组件实例，同时 VNode.data.keepAlive 标识了是一个 keep-alive 下的组件。

下面是新增组件的函数

  • 这里主要是调用 VNode 的 init()

  • 同时实例化完后会决定是否调用重新激活（activated）生命周期函数

    1. function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
    2. let i = vnode.data
    3. if (isDef(i)) {
    4.   // 标记是否需要重新激活
    5.   const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
    6.   // 调用 init 钩子函数
    7.   if (isDef(i = i.hook) && isDef(i = i.init)) {
    8.     i(vnode, false /* hydrating */)
    9.   }
    11.   // 如果组件实例构建成功
    12.   if (isDef(vnode.componentInstance)) {
    13.     initComponent(vnode, insertedVnodeQueue)
    14.     insert(parentElm, vnode.elm, refElm)
    16.     // 如果是重新激活的组件则调用对应的钩子函数
    17.     if (isTrue(isReactivated)) {
    18.       reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
    19.     }
    20.     return true
    21.   }
    22. }
    23. }

    这里是 keep-alive 与普通组件初始化开始走向分岔路的起点

  • 如果是 keep-alive 下的组件，同时初始化过了，则直接 patch

    1. init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
    2. // 如果已经有组件实例 并且 没被销毁 并且有 keepAlive 则走 patch
    3. // 反之走初始化
    4. if (
    5.   vnode.componentInstance &&
    6.   !vnode.componentInstance._isDestroyed &&
    7.   vnode.data.keepAlive
    8. ) {
    9.   // kept-alive components, treat as a patch
    10.   const mountedNode: any = vnode // work around flow
    11.   componentVNodeHooks.prepatch(mountedNode, mountedNode)
    12. } else {
    13.   const child = vnode.componentInstance = createComponentInstanceForVnode(
    14.     vnode,
    15.     activeInstance
    16.   )
    17.   child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    18. }
    19. },