likes
comments
collection
share

Vue3 KeepAlive实现原理

作者站长头像
站长
· 阅读数 79

思路

首先我们知道 KeepAlive 是一个内置组件,那封装一个组件对于大家来说应该不会有太大的困难,它的核心逻辑在于它的 render 函数,它用 map 去记录要缓存的组件,就是 [key,vnode] 的形式。它的核心思想就是 LRU,当我们限制有 maxSize 的时候,超过 maxSize 时我们会删除最久没有使用的[key, vnode],可以看看 leetcode146.LRU缓存;基本上你理清了 LRU 算法的思路,keepalive 的原理你也知道的差不多了。

代码解析

我只贴出来能帮助大家理解的核心代码,源码位于core/package/runtime-core/src/components/KeepAlive.ts

setup

const cache: Cache = new Map()
const keys: Keys = new Set()
// cache sub tree after render
let pendingCacheKey: CacheKey | null = null
const cacheSubtree = () => {
  // fix #1621, the pendingCacheKey could be 0
  if (pendingCacheKey != null) {
    cache.set(pendingCacheKey, getInnerChild(instance.subTree))
  }
}
// 组件挂载和更新的时候就会缓存最新的组件
onMounted(cacheSubtree)
onUpdated(cacheSubtree)

render

tips:这块逻辑就是 setup 的返回值

  const comp = vnode.type as ConcreteComponent
  const key = vnode.key == null ? comp : vnode.key
  pendingCacheKey = key
  const cachedVNode = cache.get(key)
  
  // tips: keys 仅仅是用于收集组件的 key 组件实际收集在cache中
  if (cachedVNode) { // 节点存在缓存中
    // copy over mounted state(复制过去的状态)
    vnode.el = cachedVNode.el
    vnode.component = cachedVNode.component

    // 将节点放到队尾
    keys.delete(key) 
    keys.add(key)
  } else { // 不存在
    keys.add(key) // 加入缓存队列
    // prune oldest entry
    // 超过最大值了,将最久没有使用的组件删除,也就是队头组件
    if (max && keys.size > parseInt(max as string, 10)) { 
      pruneCacheEntry(keys.values().next().value)
    }
  }

onActivated 和 onDeactived调用

tips:这两块逻辑是在 diff 中,看不懂没关系,只要注意一个点就是被缓存的组件节点有一个标识 ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE,我们在挂载组件的时候和卸载组件的时候判断一下是否有这个标识,有就去调用 onActiveated 或 onDeactived;源码位于:core/package/runtime-core/src/renderer

if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
  ;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)
  return
}

if (
  initialVNode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE ||
  (parent &&
    isAsyncWrapper(parent.vnode) &&
    parent.vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE)
) {
  instance.a && queuePostRenderEffect(instance.a, parentSuspense)
  if (
    __COMPAT__ &&
    isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
  ) {
    queuePostRenderEffect(
      () => instance.emit('hook:activated'),
      parentSuspense
    )
  }
}
转载自:https://juejin.cn/post/7139781859319218190
评论
请登录