17.内置组件KeepAlive保活的原理
前言
Vue 内置了 KeepAlive 组件，帮助我们实现缓存多个组件实例切换时，完成对卸载组件实例的缓存，从而使得组件实例在来会切换时不会被重复创建，又是一个空间换时间的典型例子。在介绍源码之前，我们先来了解一下 KeppAlive 使用的基础示例：
<template>
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
</template>当动态组件在随着 activeComponent 变化时，如果没有 KeepAlive 做缓存，那么组件在来回切换时就会进行重复的实例化，这里就是通过 KeepAlive 实现了对不活跃组件的缓存。
这里需要思考几个问题：
- 组件是如何被缓存的，以及是如何被重新激活的？
- 既然缓存可以提高组件渲染的性能，那么是不是缓存的越多越好呢？
- 如果不是越多越好，那么如何合理的丢弃多余的缓存呢？
接下来我们通过对源码的分析，一步步找到答案。先找到定义 KeppAlive 组件的地方，然后看一下其大致内容：
const KeepAliveImpl = {
// 组件名称
name: `KeepAlive`,
// 区别于其他组件的标记
__isKeepAlive: true,
// 组件的 props 定义
props: {
include: [String, RegExp, Array],
exclude: [String, RegExp, Array],
max: [String, Number]
},
setup(props, {slots}) {
// ...
// setup 返回一个函数
return () => {
// ...
}
}可以看到，KeepAlive 组件中，通过 __isKeepAlive 属性来完成对这个内置组件的特殊标记，这样外部可以通过 isKeepAlive 函数来做区分：
const isKeepAlive = vnode => vnode.type.__isKeepAlive紧接着定义了 KeepAlive 的一些 props：
include表示包含哪些组件可被缓存exclude表示排除那些组件max则表示最大的缓存数
后面我们将可以详细的看到这些 props 是如何被发挥作用的。
最后实现了一个 setup 函数，该函数返回了一个函数，我们前面提到 setup 返回函数的话，那么这个函数将会被当做节点 render 函数。了解了 KeepAlive 的整体骨架后，我们先来看看这个 render 函数具体做了哪些事情。
KeepAlive 的 render 函数
先来看看 render 函数的源码实现：
const KeepAliveImpl = {
// ...
setup(props, { slot }) {
// ...
return () => {
// 记录需要被缓存的 key
pendingCacheKey = null
// ...
// 获取子节点
const children = slots.default()
const rawVNode = children[0]
if (children.length > 1) {
// 子节点数量大于 1 个，不会进行缓存，直接返回
current = null
return children
} else if (
!isVNode(rawVNode) ||
(!(rawVNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) &&
!(rawVNode.shapeFlag & ShapeFlags.SUSPENSE))
) {
current = null
return rawVNode
}
// suspense 特殊处理，正常节点就是返回节点 vnode
let vnode = getInnerChild(rawVNode)
const comp = vnode.type
// 获取 Component.name 值
const name = getComponentName(isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp)
// 获取 props 中的属性
const { include, exclude, max } = props
// 如果组件 name 不在 include 中或者存在于 exclude 中，则直接返回
if (
(include && (!name || !matches(include, name))) ||
(exclude && name && matches(exclude, name))
) {
current = vnode
return rawVNode
}
// 缓存相关，定义缓存 key
const key = vnode.key == null ? comp : vnode.key
// 从缓存中取值
const cachedVNode = cache.get(key)
// clone vnode，因为需要重用
if (vnode.el) {
vnode = cloneVNode(vnode)
if (rawVNode.shapeFlag & ShapeFlags.SUSPENSE) {
rawVNode.ssContent = vnode
}
}
// 给 pendingCacheKey 赋值，将在 beforeMount/beforeUpdate 中被使用
pendingCacheKey = key
// 如果存在缓存的 vnode 元素
if (cachedVNode) {
// 复制挂载状态
// 复制 DOM
vnode.el = cachedVNode.el
// 复制 component
vnode.component = cachedVNode.component
// 增加 shapeFlag 类型 COMPONENT_KEPT_ALIVE
vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
// 把缓存的 key 移动到到队首
keys.delete(key)
keys.add(key)
} else {
// 如果缓存不存在，则添加缓存
keys.add(key)
// 如果超出了最大的限制，则移除最早被缓存的值
if (max && keys.size > parseInt(max as string, 10)) {
pruneCacheEntry(keys.values().next().value)
}
}
// 增加 shapeFlag 类型 COMPONENT_SHOULD_KEEP_ALIVE，避免被卸载
vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
current = vnode
// 返回 vnode 节点
return isSuspense(rawVNode.type) ? rawVNode : vnode
}
}
}可以看到返回的这个 render 函数执行的结果就是返回被 KeepAlive 包裹的子节点的 vnode 只不过在返回子节点的过程中做了很多处理而已，如果子节点数量大于一个，那么将不会被 keepAlive，直接返回子节点的 vnode，如果组件 name 不在用户定义的 include 中或者存在于 exclude 中，也会直接返回子节点的 vnode。
缓存设计
接着来看后续的缓存步骤，首先定义了一个 pendingCacheKey 变量，用来作为 cache 的缓存 key。对于初始化的 KeepAlive 组件的时候，此时还没有缓存，那么只会讲 key 添加到 keys 这样一个 Set 的数据结构中，在组件 onMounted 和 onUpdated 钩子中进行缓存组件的 vnode 收集，因为这个时候收集到的 vnode 节点是稳定不会变的缓存。
const cacheSubtree = () => {
if (pendingCacheKey != null) {
// 以 pendingCacheKey 作为key 进行缓存收集
cache.set(pendingCacheKey, getInnerChild(instance.subTree))
}
}
onMounted(cacheSubtree)
onUpdated(cacheSubtree)另外，注意到 props 中还有一个 max 变量用来标记最大的缓存数量，这个缓存策略就是类似于 LRU 缓存 的方式实现的。在缓存重新被激活时，之前缓存的 key 会被重新添加到队首，标记为最近的一次缓存，如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。
最后，当缓存的节点被重新激活时，则会将缓存中的节点的 el 属性赋值给新的 vnode 节点，从而减少了再进行 patch 生成 DOM 的过程，这里也说明了 KeepAlive 核心目的就是缓存 DOM 元素。
激活态设计
上述源码中，当组件被添加到 KeepAlive 缓存池中时，也会为 vnode 节点的 shapeFlag 添加两额外的两个属性，分别是 COMPONENT_KEPT_ALIVE 和 COMPONENT_SHOULD_KEEP_ALIVE。我们先说 COMPONENT_KEPT_ALIVE 这个属性，当一个节点被标记为 COMPONENT_KEPT_ALIVE 时，会在 processComponent 时进行特殊处理：
const processComponent = (...) => {
if (n1 == null) {
// 处理 KeepAlive 组件
if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
// 执行 activate 钩子
;(parentComponent!.ctx as KeepAliveContext).activate(
n2,
container,
anchor,
isSVG,
optimized
)
} else {
mountComponent(
n2,
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
optimized
)
}
}
else {
// 更新组件
}
}可以看到，在 processComponent 阶段如果是 keepAlive 的组件，在挂载过程中，不会执行执行 mountComponent 的逻辑，因为已经缓存好了，所以只需要再次调用 activate 激活就好了。接下来看看这个激活函数做了哪些事儿：
const KeepAliveImpl = {
// ...
setup(props, { slot }) {
sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
// 获取组件实例
const instance = vnode.component!
// 将缓存的组件挂载到容器中
move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
// 如果 props 有变动，还是需要对 props 进行 patch
patch(
instance.vnode,
vnode,
container,
anchor,
instance,
parentSuspense,
isSVG,
vnode.slotScopeIds,
optimized
)
// 执行组件的钩子函数
queuePostRenderEffect(() => {
instance.isDeactivated = false
// 执行 onActivated 钩子
if (instance.a) {
invokeArrayFns(instance.a)
}
// 执行 onVnodeMounted 钩子
const vnodeHook = vnode.props && vnode.props.onVnodeMounted
if (vnodeHook) {
invokeVNodeHook(vnodeHook, instance.parent, vnode)
}
}, parentSuspense)
}
// ...
}
}
可以直观的看到 activate 激活函数，核心就是通过 move 方法，将缓存中的 vnode 节点直接挂载到容器中，同时为了防止 props 变化导致组件变化，也会执行 patch 方法来更新组件，注意此时的 patch 函数的调用是会传入新老子节点的，所以只会进行 diff 而不会进行重新创建。
当这一切都执行完成后，最后再通过 queuePostRenderEffect 函数，将用户定义的 onActivated 钩子放到状态更新流程后执行。
卸载态设计
接下来我们再看另一个标记态：COMPONENT_SHOULD_KEEP_ALIVE，我们看一下组件的卸载函数 unmount 的设计：
const unmount = (vnode, parentComponent, parentSuspense, doRemove = false) => {
// ...
const { shapeFlag } = vnode
if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
return
}
// ...
}可以看到，如果 shapeFlag 上存在 COMPONENT_SHOULD_KEEP_ALIVE 属性的话，那么将会执行 ctx.deactivate 方法，我们再来看一下 deactivate 函数的定义：
const KeepAliveImpl = {
// ...
setup(props, { slot }) {
// 创建一个隐藏容器
const storageContainer = createElement('div')
sharedContext.deactivate = (vnode: VNode) => {
// 获取组件实例
const instance = vnode.component!
// 将组件移动到隐藏容器中
move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
// 执行组件的钩子函数
queuePostRenderEffect(() => {
// 执行组件的 onDeactivated 钩子
if (instance.da) {
invokeArrayFns(instance.da)
}
// 执行 onVnodeUnmounted
const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted
if (vnodeHook) {
invokeVNodeHook(vnodeHook, instance.parent, vnode)
}
instance.isDeactivated = true
}, parentSuspense)
}
// ...
}
}
卸载态函数 deactivate 核心工作就是将页面中的 DOM 移动到一个隐藏不可见的容器 storageContainer 当中，这样页面中的元素就被移除了。当这一切都执行完成后，最后再通过 queuePostRenderEffect 函数，将用户定义的 onDeactivated 钩子放到状态更新流程后执行。
总结
现在我们尝试着再回答文中开篇提到的三个问题：
- 组件是通过类似于
LRU的缓存机制来缓存的，并为缓存的组件vnode的shapeFlag属性打上COMPONENT_KEPT_ALIVE属性，当组件在processComponent挂载时，如果存在COMPONENT_KEPT_ALIVE属性，则会执行激活函数，激活函数内执行具体的缓存节点挂载逻辑。 - 缓存不是越多越好，因为所有的缓存节点都会被存在
cache中，如果过多，则会增加内存负担。 - 丢弃的方式就是在缓存重新被激活时，之前缓存的
key会被重新添加到队首，标记为最近的一次缓存，如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被丢弃。