vue3中的KeepAlive原理到底是什么（一）

zhouzhouya

发布于 2023-10-26 17:31:08

1790

发布于 2023-10-26 17:31:08

文章被收录于专栏：一名前端开发一名前端开发

KeepAlive是什么

KeepAlive借鉴http协议，在http中KeepAlive是避免链接频繁的销毁和创建，那vue中的KeepAlive是什么呢，它的作用是避免组件被频繁的销毁和创建。

KeepAlive组件的实现需要渲染器的支持

为什么KeepAlive组件的实现需要渲染器的支持呢，是因为KeepAlive组件在卸载时，是将KeepAlive从一个容器搬到另外一个隐藏的容器，实现假卸载。当被搬运的组件需要再次被挂载的时候，是把其从隐藏的容器中搬到原容器。这个过程对应组件的生命周期是activated和的deactivated。

缓存机制

KeepAlive 组件是通过LRU算法来实现缓存机制。（暂不讲解下一篇文章讲述）

缓存实现

const KeepAliveImpl = {
  __isKeepAlive: true,
  inheritRef: true,
  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },
  setup(props: KeepAliveProps, { slots }: SetupContext){

    // 省略其他代码...

    return()=>{
      if (!slots.default) {
        return null
      }
      const children = slots.default()
      let vnode = children[0]  
      if (children.length > 1) {
        current = null
        return children
      } else if (
        !isVNode(vnode) ||
        !(vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT)
      ) {
        current = null
        return vnode
      }
      // 省略其他代码...
      return vnode
    }
  }
}

从代码看出，KeepAlive是通过 Composition API 实现，KeepAlive的实现是通过拿到子节点（const children = slots.default()），获取第一个子节点的值（let vnode = children[0] ），存在多个子节点的时候，keepAlive组件不生效了，直接返回。