内置组件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) } }
