vue3 keep-Alive 源码分分钟学会

119 阅读2分钟

keep-Alive 是什么

1.keep-Alive 是一个抽象的插件,他自身不会渲染dom,也不会出现在父组件链中 2.keep-Alive 包裹动态组件时,会缓存不在活动的组件,

Keep-Alive 用法

1.在动态路由中使用的 Keep-Alive image.png 2.keep-Alive 中的include是用来做缓存白名单的, include方法是当触发这个组件时,或者说动态路由时,会缓存当前的组件,

3.exclude 是用来缓存黑名单的,exclude方法是当触发这个组件时,或者说动态路由时,会讲当前组件缓存到黑名单, 也就是意味着不会缓存当前组件

4.max是用来判断缓存的最大值,如果max设置的值是10,那么超过最大值的时候会使用已缓存组件中最久没有被访问的实例会被销毁掉,而这里所运用到的缓存机制就是 LRU 算法

LRU 缓存淘汰算法

image.png

  1. 新数据插入到链表尾部;
  2. 每当缓存命中(即缓存数据被访问),则将数据移到链表尾部
  3. 当链表满的时候,将链表头部的数据丢弃。

keepAlive源码解读

1.render函数 

image.png

  1. 根据组件ID和tag生成缓存Key,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该key在this.keys中的位置(更新key的位置是实现LRU置换策略的关键),否则执行第四步;

2.在this.cache对象中存储该组件实例并保存key值,之后检查缓存的实例数量是否超过max的设置值,超过则根据LRU置换策略删除最近最久未使用的实例(即是下标为0的那个key);

3.最后将该组件实例的keepAlive属性值设置为true;

2.created

image.png created方法很简单,就初始化了两个变量

  1. cache用来缓存虚拟dom;
  2. keys用来缓存虚拟dom的键集合

3.mounted

image.png

1.在mounted这个钩子中对include和exclude参数进行监听,然后实时地更新(删除)this.cache对象数据。2.pruneCache函数的核心也是去调用pruneCacheEntry。

5.destroyed

image.png

  1. this.cache中缓存的VNode实例;
  2. 遍历调用pruneCacheEntry函数删除缓存VNode还要对应执行组件实例的destory函数;