Vue核心组件之一 keep-alive 及重要原理

Vue核心组件之一 keep-alive 及重要原理

不知道大伙有没有在工作遇到一些需求。就是某个页面的数据，在用户离开操作回来，数据要保持离开前状态滚动条也是，可能有人会用vuex、或者浏览器缓存。但是如果这个页面有很多数据呢，还要操作滚动条吗？

keep-alive解决疑难杂症

keep-alive 这个组件几乎在项目是经常出现的，因为合理应用可以有利项目性能，以及友好的用户体验。也是Vue自带组件，主要功能就是，让组件状态数据持久化，不会被路由的切换导致重新渲染。

使用方式

keep-alive 组件使用方式也是极其简单，直接包裹你需要缓存的组件，或者路由器。

<!-- 基本 -->
<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 : 不被缓存的黑名单，及时名称匹配也不会缓存
• max： 缓存的最大组件数量

缓存的组件数量超出了max怎么出来的？

keep-alive 组件里如果数量超过max。那么则使用会把最久没有被访问过的组件移出缓存队列注销掉。而所用的底层机制就是利用 LRU算法 方式

LUR缓存淘汰法

根据历史的数据来淘汰数据。重点：保护最近被访问过的组件，淘汰最久没有访问的。主要思想，如果数据最近没有访问过，那么他后面被访问的几率不会打

淘汰主要步骤

• 新访问的组件追加到链表尾部
• 被当组件被访问，已缓存的组件名命中，则也是追加到尾部
• 当数量达到目标值时候，则从链表头部开始移出，然后注销该组件；