内置组件keep-alive
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive
组件。
开启keep-alive 生命周期的变化
- 初次进入时: onMounted> onActivated
- 退出后触发
deactivated
- 再次进入:
- 只会触发 onActivated
- 事件挂载的方法等,只执行一次的放在 onMounted中;组件每次进去执行的方法放在 onActivated中
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<transition>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</transition>
include
和 exclude
<keep-alive :include="" :exclude="" :max=""></keep-alive>
include 和 exclude 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:
max
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
keep-alive 源码讲解
源码目录runtime-core/src/components/KeepAlive.ts
props
props: {
include: [String, RegExp, Array], // 配置了该属性,那么只有名称匹配的组件会被缓存
exclude: [String, RegExp, Array], // 配置了该属性,那么任何名称匹配的组件都不会被缓存
max: [String, Number]// 最多可以缓存多少组件实例
},
setup(props: KeepAliveProps, { slots }: SetupContext) {
const instance = getCurrentInstance()!
const sharedContext = instance.ctx as KeepAliveContext
})
const { include, exclude, max } = props
//如果include 子组件名称 不包含, 和 exclude包含的名字 就不该缓存 直接返回
if (
(include && (!name || !matches(include, name))) ||
(exclude && name && matches(exclude, name))
) {
current = vnode
return rawVNode
}
watch(
() => [props.include, props.exclude],
([include, exclude]) => {
//props 是响应式的 所以这个操作需要在做一遍
include && pruneCache(name => matches(include, name))
exclude && pruneCache(name => !matches(exclude, name))
},
// prune post-render after `current` has been updated
{ flush: 'post', deep: true }
)
缓存设计
//KeepAlive 组件的缓存管理
const cache: Cache = new Map()
const keys: Keys = new Set()
let pendingCacheKey: CacheKey | null = null
//缓存函数
const cacheSubtree = () => {
// fix #1621, the pendingCacheKey could be 0
if (pendingCacheKey != null) {
cache.set(pendingCacheKey, getInnerChild(instance.subTree))
}
}
//KeepLive 组件中对缓存的管理时,首先会在组件的 onMounted 或 onUpdated 生命周期钩子函数中设置缓存,如下代码所示:
onMounted(cacheSubtree)
onUpdated(cacheSubtree)
//Vnode 的key 作为缓存的key
pendingCacheKey = key
//KeepLive组件返回的函数中根据 vnode 对象的 key 去缓存中查找是否有缓存的组件,
//如果缓存存在,则继承组件实例,并将用于描述组件的 vnode 对象标记为 COMPONENT_KEPT_ALIVE,
//这样渲染器就不会重新创建新的组件实例;如果缓存不存在,则将 vnode 对象的key 添加到 keys 集合中
if (cachedVNode) {
// 如果缓存中存在缓存的组件
vnode.el = cachedVNode.el
vnode.component = cachedVNode.component
//无须创建组件实例,继承缓存的组件即可
if (vnode.transition) {
// 如果组件上有动画,处理动画
setTransitionHooks(vnode, vnode.transition!)
}
// 标记Vnode 不会重新渲染
vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE
// make this key the freshest
keys.delete(key)
keys.add(key)
} else {
//将 vnode 的key 添加到 keys 集合中,keys 集合用户维护缓存组件的 key
keys.add(key)
// prune oldest entry
if (max && keys.size > parseInt(max as string, 10)) {
pruneCacheEntry(keys.values().next().value)
}
}
生命周期
//隐藏容器
const storageContainer = createElement('div')
//在实例上注册两个钩子函数 activate, deactivate
sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
const instance = vnode.component!
move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
// props 可能会发生变化,因此需要执行 patch 过程
patch(
instance.vnode,
vnode,
container,
anchor,
instance,
parentSuspense,
isSVG,
vnode.slotScopeIds,
optimized
)
queuePostRenderEffect(() => {
instance.isDeactivated = false
if (instance.a) {
invokeArrayFns(instance.a)
}
const vnodeHook = vnode.props && vnode.props.onVnodeMounted
if (vnodeHook) {
invokeVNodeHook(vnodeHook, instance.parent, vnode)
}
}, parentSuspense)
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
// Update components tree
devtoolsComponentAdded(instance)
}
}
sharedContext.deactivate = (vnode: VNode) => {
const instance = vnode.component!
//将组件移动到隐藏容器中
//在 “卸载” 组件时,并不是真正的卸载,而是调用 move 方法,将组件搬运到一个隐藏的容器中
move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
queuePostRenderEffect(() => {
if (instance.da) {
invokeArrayFns(instance.da)
}
const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted
if (vnodeHook) {
invokeVNodeHook(vnodeHook, instance.parent, vnode)
}
instance.isDeactivated = true
}, parentSuspense)
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
// Update components tree
devtoolsComponentAdded(instance)
}
}