VUE3 keep-alive 缓存

407 阅读3分钟

image.png

用法

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在 keep-alive 内被切换时,它的 mounted 和 unmounted 生命周期钩子不会被调用,取而代之的是activated和deactivated

包含/排除

<KeepAlive> 默认会缓存内部的所有组件实例,但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式,或是包含这两种类型的一个数组:

image.png 它会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须显式声明一个 name 选项。

最大缓存实例数

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存:如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间。

image.png

功能

keep-alive主要实现两个功能:
1 通过LRU算法更新组件缓存(主要是更有效的利用内存,避免内存溢出);
2 缓存组件;

LRU全称 (Least Recentey Used)翻译过来就是最新使用的意思,LRU淘汰缓存数据的规则就是将很久没有使用过的缓存数据删除或者这个数据被缓存过还会被使用,这句话就是LRU算法的中心思想。

解析

首先会缓存白名单,keep-alive有杀个属性 分别是 include exclude max 一个是包含,不包含和最大的缓存实例 在生命期creactd中,会创建缓存VNode的纯对象和缓存vnode的key集合 然后在mounted监听黑白名单的变动,然后在destroyed中删除没有用的缓存,最后render中首先获取keep-alive包裹着的第一个子组件对象及其组件名;接着根据设定的黑白名单(如果有)进行条件匹配,决定是否缓存。不匹配,直接返回组件实例(VNode),否则执行第三步;然后根据组件ID和tag生成缓存Key,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该key在this.keys中的位置(更新key的位置是实现LRU置换策略的关键),否则执行第四步;其次在this.cache对象中存储该组件实例并保存key值,之后检查缓存的实例数量是否超过max的设置值,超过则根据LRU置换策略删除最近最久未使用的实例(即是下标为0的那个key)。 最后并且很重要,将该组件实例的keepAlive属性值设置为true。

这就是我对keep-alive的理解。