• Contents

KeepAlive 的本质是缓存管理，再加上特殊的挂载/卸载逻辑。

  1. <KeepAlive>
  2.   <CompA v-if="flag"></CompA>
  3.   <CompB v-else></CompB>
  4.   <button @click="flag=!flag">toggle</button>
  5. </KeepAlive>

模版编译之后的结果：Teleport Explorer

  1. import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, KeepAlive as _KeepAlive } from "vue"
  3. export function render(_ctx, _cache, $props, $setup, $data, $options) {
  4.   const _component_CompA = _resolveComponent("CompA")
  5.   const _component_CompB = _resolveComponent("CompB")
  7.   return (_openBlock(), _createBlock(_KeepAlive, null, [
  8.     (_ctx.flag)
  9.       // KeepAlive 的子节点创建的时候都添加了一个 key 的 prop
  10.       // 专门为 KeepAlive 的缓存设计的，这样每一个子节点都能有一个唯一的 key
  11.       ? (_openBlock(), _createBlock(_component_CompA, { key: 0 }))
  12.       : (_openBlock(), _createBlock(_component_CompB, { key: 1 })),
  13.     _createElementVNode("button", {
  14.       onClick: $event => (_ctx.flag=!_ctx.flag)
  15.     }, "toggle", 8 /* PROPS */, ["onClick"])
  16.   ], 1024 /* DYNAMIC_SLOTS */))
  17. }

KeepAlive 组件对这两个组件做了一层封装，KeepAlive 是一个抽象组件，它并不会渲染成一个真实的 DOM，只会渲染内部包裹的子节点，并且让内部的子组件在切换的时候，不会走一整套递归卸载和挂载 DOM 的流程（而是走激活和失活流程）。

  • deactivate 失活：将 KeepAlive 组件从原容器中移动到另一个隐藏容器中，实现「假卸载」
  • activate 激活：将该组件从隐藏容器中再搬运到原容器中

缓存管理使用 LRU Cache

组件渲染

函数先从 slots.default() 拿到子节点 children，它就是 KeepAlive 组件包裹的子组件，由于 KeepAlive 只能渲染单个子节点，所以当 children 长度大于 1 的时候会报警告。

先不考虑缓存情况下，KeepAlive 渲染的 vnode 就是子节点 children 的第一个元素，它是函数的返回值。

KeepAlive 是抽象组件，它本身不渲染成实体节点，而是渲染它的第一个子节点。

缓存的设计

KeepAlive 内注入了两个钩子函数，onMounted 和 onUpdated，在这两个钩子函数内部都执行了 cacheSubtree 函数来做缓存。

  1. const cacheSubtree = () => {
  2.   // fix #1621, the pendingCacheKey could be 0
  3.   if (pendingCacheKey != null) {
  4.     cache.set(pendingCacheKey, getInnerChild(instance.subTree))
  5.   }
  6. }

由于 pendingCacheKey 是在 KeepAlive 的 render 函数中才会被赋值，所以 KeepAlive 首次进入 onMounted 钩子函数的时候是不会缓存的。

然后 KeepAlive 执行 render 的时候，pendingCacheKey 会被赋值为 vnode.key，渲染后的模板。（KeepAlive 的子节点创建的时候都添加了一个 key 的 prop，它就是专门为 KeepAlive 的缓存设计的，这样每一个子节点都能有一个唯一的 key。请见：上面示例渲染后的模板）

有了缓存的渲染子树后，我们就可以直接拿到它对应的 DOM 以及组件实例 component，赋值给 KeepAlive 的 vnode，并更新 vnode.shapeFlag，以便后续 patch 阶段使用。

由于 KeepAlive 缓存的都是有状态的组件 vnode，有缓存和没缓存在 patch 和 unmount 阶段有何区别？

patch

  1. const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
  2.   n2.slotScopeIds = slotScopeIds
  3.   if (n1 == null) {
  4.     // 处理 KeepAlive 组件
  5.     if (n2.shapeFlag & 512 /* COMPONENT_KEPT_ALIVE */) {
  6.       parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized)
  7.     }
  8.     else {
  9.       // 挂载组件
  10.       mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)
  11.     }
  12.   }
  13.   else {
  14.     // 更新组件
  15.   }
  16. }

KeepAlive 首次渲染某一个子节点时，和正常的组件节点渲染没有区别。

但是有缓存后，由于标记了 shapeFlag，所以在执行 processComponent 函数时会走到处理 KeepAlive 组件的逻辑中，执行 KeepAlive 组件实例上下文中的 activate 激活函数（sharedContext.activate）。

sharedContext.activate 中可以看出由于此时已经能从 vnode.el 中拿到缓存的 DOM 了，所以可以直接调用 move 方法挂载节点（而不是重新挂载），然后执行 patch 方法更新组件，以防止 props 发生变化的情况。接下来，就是通过 queuePostRenderEffect 的方式，在组件渲染完毕后，执行子节点组件定义的 activated 钩子函数。

unmount

类似的还有 unmount 阶段

  1. const unmount = (
  2.   vnode,
  3.   parentComponent,
  4.   parentSuspense,
  5.   doRemove = false,
  6.   optimized = false
  7. ) => {
  8.   const {
  9.     type,
  10.     props,
  11.     ref,
  12.     children,
  13.     dynamicChildren,
  14.     shapeFlag,
  15.     patchFlag,
  16.     dirs
  17.   } = vnode
  18.   // unset ref
  19.   if (ref != null) {
  20.     setRef(ref, null, parentSuspense, vnode, true)
  21.   }
  22.     // 处理 KeepAlive 组件
  23.   if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
  24.     ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
  25.     return
  26.   }
  27.   // 省略代码
  28. }

有缓存标记 shapeFlag 之后在执行 unmount 函数时会走到处理 KeepAlive 组件的逻辑中，执行 KeepAlive 组件实例上下文中的 deactivate 失活函数（sharedContext.deactivate）。

组件并不会被卸载，而是调用 move 方法挂载到 storageContainer 隐藏容器内，然后执行 queuePostRenderEffect 的方式

缓存管理 - LRU Cache

Vue.js 对于缓存所采用的修剪策略是：LRU Cache，可以通过 max prop 来设置。

  1. <KeepAlive :max="2">
  2.   <Comp :is="dynamicComp" />
  3. </KeepAlive>

源码实现：

  1. const keys: Keys = new Set()
  3. if (cachedVNode) {
  4.   // 有缓存
  6.   // 省略代码
  8.   // make this key the freshest
  9.   // 先删除已有 key，再重新增加，保证最新
  10.   keys.delete(key)
  11.   keys.add(key)
  12. } else {
  13.   // 无缓存
  14.   // 直接新增
  15.   keys.add(key)
  16.   // prune oldest entry
  17.   // 超过 max 限制，则清缓存
  18.   if (max && keys.size > parseInt(max as string, 10)) {
  19.     pruneCacheEntry(keys.values().next().value)
  20.   }
  21. }
  23. function pruneCacheEntry(key: CacheKey) {
  24.   const cached = cache.get(key) as VNode
  25.   if (!current || cached.type !== current.type) {
  26.     // 真正的卸载组件
  27.     unmount(cached)
  28.   } else if (current) {
  29.     // current active instance should no longer be kept-alive.
  30.     // we can't unmount it now but it might be later, so reset its flag now.
  31.     // 修改 vnode 的 shapeFlag
  32.     // 不让它再被当作一个 KeepAlive 的 vnode
  33.     // 这样就可以走正常的卸载逻辑
  34.     resetShapeFlag(current)
  35.   }
  36.   cache.delete(key)
  37.   keys.delete(key)
  38. }

卸载

除 KeepAlive 组件本身的 unmount 之外，当 KeepAlive 所在的组件卸载时，由于卸载的递归特性，也会触发 KeepAlive 组件的卸载，在卸载的过程中会执行 onBeforeUnmount 钩子函数

  1. onBeforeUnmount(() => {
  2.   cache.forEach((cached) => {
  3.     const { subTree, suspense } = instance
  4.     const vnode = getInnerChild(subTree)
  5.     if (cached.type === vnode.type) {
  6.       // current instance will be unmounted as part of keep-alive's unmount
  7.       resetShapeFlag(vnode)
  8.       // but invoke its deactivated hook here
  9.       const da = vnode.component!.da
  10.       da && queuePostRenderEffect(da, suspense)
  11.       return
  12.     }
  13.     unmount(cached)
  14.   })
  15. })

遍历所有缓存的 vnode，并且比对缓存的 vnode 是不是当前 KeepAlive 组件渲染的 vnode

  • 是，则执行 resetShapeFlag 方法（修改 vnode 的 shapeFlag，不让它再被当作一个 KeepAlive 的 vnode，这样就可以走正常的卸载逻辑）。接着通过 queuePostRenderEffect 的方式执行子组件的 deactivated 钩子函数。
  • 不是，则执行 unmount 方法重置 shapeFlag 以及执行缓存 vnode 的整套卸载流程
  1. const KeepAliveImpl: ComponentOptions = {
  2.   name: `KeepAlive`,
  4.   // Marker for special handling inside the renderer. We are not using a ===
  5.   // check directly on KeepAlive in the renderer, because importing it directly
  6.   // would prevent it from being tree-shaken.
  7.   __isKeepAlive: true,
  9.   props: {
  10.     include: [String, RegExp, Array],
  11.     exclude: [String, RegExp, Array],
  12.     max: [String, Number],
  13.   },
  15.   setup(props: KeepAliveProps, { slots }: SetupContext) {
  16.     // 当前 KeepAlive 组件的实例
  17.     const instance = getCurrentInstance()!
  18.     // KeepAlive communicates with the instantiated renderer via the
  19.     // ctx where the renderer passes in its internals,
  20.     // and the KeepAlive instance exposes activate/deactivate implementations.
  21.     // The whole point of this is to avoid importing KeepAlive directly in the
  22.     // renderer to facilitate tree-shaking.
  23.     // 对于 KeepAlive 组件来说，它的实例上存在特殊的 keepAliveCtx 对象，该对象由渲染器注入
  24.     // 该对象会暴露渲染器的一些内部方法，例如其中 move 函数用来将一段 DOM 移动到另一个容器中
  25.     const sharedContext = instance.ctx as KeepAliveContext
  27.     // if the internal renderer is not registered, it indicates that this is server-side rendering,
  28.     // for KeepAlive, we just need to render its children
  29.     if (__SSR__ && !sharedContext.renderer) {
  30.       return () => {
  31.         const children = slots.default && slots.default()
  32.         return children && children.length === 1 ? children[0] : children
  33.       }
  34.     }
  36.     // 创建一个缓存对象
  37.     // key: vnode.type
  38.     // value: vnode
  39.     const cache: Cache = new Map()
  40.     const keys: Keys = new Set()
  41.     let current: VNode | null = null
  43.     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
  44.       ;(instance as any).__v_cache = cache
  45.     }
  47.     const parentSuspense = instance.suspense
  49.     const {
  50.       renderer: {
  51.         p: patch,
  52.         m: move,
  53.         um: _unmount,
  54.         o: { createElement },
  55.       },
  56.     } = sharedContext
  57.     // 创建隐藏容器
  58.     const storageContainer = createElement('div')
  60.     sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
  61.       const instance = vnode.component!
  62.       move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
  63.       // in case props have changed
  64.       patch(
  65.         instance.vnode,
  66.         vnode,
  67.         container,
  68.         anchor,
  69.         instance,
  70.         parentSuspense,
  71.         isSVG,
  72.         vnode.slotScopeIds,
  73.         optimized
  74.       )
  75.       queuePostRenderEffect(() => {
  76.         instance.isDeactivated = false
  77.         if (instance.a) {
  78.           invokeArrayFns(instance.a)
  79.         }
  80.         const vnodeHook = vnode.props && vnode.props.onVnodeMounted
  81.         if (vnodeHook) {
  82.           invokeVNodeHook(vnodeHook, instance.parent, vnode)
  83.         }
  84.       }, parentSuspense)
  86.       if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
  87.         // Update components tree
  88.         devtoolsComponentAdded(instance)
  89.       }
  90.     }
  92.     sharedContext.deactivate = (vnode: VNode) => {
  93.       const instance = vnode.component!
  94.       move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
  95.       queuePostRenderEffect(() => {
  96.         if (instance.da) {
  97.           invokeArrayFns(instance.da)
  98.         }
  99.         const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted
  100.         if (vnodeHook) {
  101.           invokeVNodeHook(vnodeHook, instance.parent, vnode)
  102.         }
  103.         instance.isDeactivated = true
  104.       }, parentSuspense)
  106.       if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
  107.         // Update components tree
  108.         devtoolsComponentAdded(instance)
  109.       }
  110.     }
  112.     function unmount(vnode: VNode) {
  113.       // reset the shapeFlag so it can be properly unmounted
  114.       resetShapeFlag(vnode)
  115.       _unmount(vnode, instance, parentSuspense, true)
  116.     }
  118.     function pruneCache(filter?: (name: string) => boolean) {
  119.       cache.forEach((vnode, key) => {
  120.         const name = getComponentName(vnode.type as ConcreteComponent)
  121.         if (name && (!filter || !filter(name))) {
  122.           pruneCacheEntry(key)
  123.         }
  124.       })
  125.     }
  127.     function pruneCacheEntry(key: CacheKey) {
  128.       const cached = cache.get(key) as VNode
  129.       if (!current || cached.type !== current.type) {
  130.         unmount(cached)
  131.       } else if (current) {
  132.         // current active instance should no longer be kept-alive.
  133.         // we can't unmount it now but it might be later, so reset its flag now.
  134.         resetShapeFlag(current)
  135.       }
  136.       cache.delete(key)
  137.       keys.delete(key)
  138.     }
  140.     // prune cache on include/exclude prop change
  141.     watch(
  142.       () => [props.include, props.exclude],
  143.       ([include, exclude]) => {
  144.         include && pruneCache((name) => matches(include, name))
  145.         exclude && pruneCache((name) => !matches(exclude, name))
  146.       },
  147.       // prune post-render after `current` has been updated
  148.       { flush: 'post', deep: true }
  149.     )
  151.     // cache sub tree after render
  152.     let pendingCacheKey: CacheKey | null = null
  153.     const cacheSubtree = () => {
  154.       // fix #1621, the pendingCacheKey could be 0
  155.       if (pendingCacheKey != null) {
  156.         cache.set(pendingCacheKey, getInnerChild(instance.subTree))
  157.       }
  158.     }
  159.     onMounted(cacheSubtree)
  160.     onUpdated(cacheSubtree)
  162.     onBeforeUnmount(() => {
  163.       cache.forEach((cached) => {
  164.         const { subTree, suspense } = instance
  165.         const vnode = getInnerChild(subTree)
  166.         if (cached.type === vnode.type) {
  167.           // current instance will be unmounted as part of keep-alive's unmount
  168.           resetShapeFlag(vnode)
  169.           // but invoke its deactivated hook here
  170.           const da = vnode.component!.da
  171.           da && queuePostRenderEffect(da, suspense)
  172.           return
  173.         }
  174.         unmount(cached)
  175.       })
  176.     })
  178.     return () => {
  179.       pendingCacheKey = null
  181.       if (!slots.default) {
  182.         return null
  183.       }
  185.       const children = slots.default()
  186.       const rawVNode = children[0]
  187.       if (children.length > 1) {
  188.         if (__DEV__) {
  189.           warn(`KeepAlive should contain exactly one component child.`)
  190.         }
  191.         current = null
  192.         return children
  193.       } else if (
  194.         !isVNode(rawVNode) ||
  195.         (!(rawVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) &&
  196.           !(rawVNode.shapeFlag & ShapeFlags.SUSPENSE))
  197.       ) {
  198.         current = null
  199.         return rawVNode
  200.       }
  202.       let vnode = getInnerChild(rawVNode)
  203.       const comp = vnode.type as ConcreteComponent
  205.       // for async components, name check should be based in its loaded
  206.       // inner component if available
  207.       const name = getComponentName(
  208.         isAsyncWrapper(vnode)
  209.           ? (vnode.type as ComponentOptions).__asyncResolved || {}
  210.           : comp
  211.       )
  213.       const { include, exclude, max } = props
  215.       if (
  216.         (include && (!name || !matches(include, name))) ||
  217.         (exclude && name && matches(exclude, name))
  218.       ) {
  219.         current = vnode
  220.         return rawVNode
  221.       }
  223.       const key = vnode.key == null ? comp : vnode.key
  224.       // 挂载时先获取缓存的组件 vnode
  225.       const cachedVNode = cache.get(key)
  227.       // clone vnode if it's reused because we are going to mutate it
  228.       if (vnode.el) {
  229.         vnode = cloneVNode(vnode)
  230.         if (rawVNode.shapeFlag & ShapeFlags.SUSPENSE) {
  231.           rawVNode.ssContent = vnode
  232.         }
  233.       }
  234.       // #1513 it's possible for the returned vnode to be cloned due to attr
  235.       // fallthrough or scopeId, so the vnode here may not be the final vnode
  236.       // that is mounted. Instead of caching it directly, we store the pending
  237.       // key and cache `instance.subTree` (the normalized vnode) in
  238.       // beforeMount/beforeUpdate hooks.
  239.       pendingCacheKey = key
  241.       if (cachedVNode) {
  242.         // 有缓存，则不挂载，而走激活
  243.         // copy over mounted state
  244.         vnode.el = cachedVNode.el
  245.         vnode.component = cachedVNode.component
  246.         if (vnode.transition) {
  247.           // recursively update transition hooks on subTree
  248.           setTransitionHooks(vnode, vnode.transition!)
  249.         }
  250.         // 避免 vnode 节点作为新节点被挂载
  251.         // avoid vnode being mounted as fresh
  252.         vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
  253.         // make this key the freshest
  254.         keys.delete(key)
  255.         keys.add(key)
  256.       } else {
  257.         keys.add(key)
  258.         // prune oldest entry
  259.         // 删除最久不用的 key
  260.         if (max && keys.size > parseInt(max as string, 10)) {
  261.           pruneCacheEntry(keys.values().next().value)
  262.         }
  263.       }
  264.       // avoid vnode being unmounted
  265.       // 避免 vnode 被卸载
  266.       vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
  268.       current = vnode
  269.       return isSuspense(rawVNode.type) ? rawVNode : vnode
  270.     }
  271.   },
  272. }