空闲-Keep-Alive使用及其实现原理

<keep-alive>是Vue.js中的一个内置组件，用于缓存动态组件或组件的状态，以避免重复渲染和销毁。它通常用于性能优化，尤其是在需要频繁切换组件的场景中。

使用方式

<keep-alive>可以包裹动态组件或路由组件，缓存它们的实例。

常用属性

include、exclude属性进行条件渲染，控制哪些组件实例需要缓存或不缓存

max:最大缓存组件实例

实现原理

1.缓存机制 keep-alive组件内部维护了一个缓存对象cache，用于存储被缓存的组件实例。当组件被切换时，keep-alive会检查缓存对象中是否已经存在该组件的实例。如果存在，则直接复用缓存的实例；如果不存在，则创建新的实例并缓存。

2.生命周期钩子 keep-alive组件通过Vue的生命周期钩子来管理组件的缓存和激活。具体来说，它使用了activated和deactivated两个生命周期钩子。

这些钩子可以用来在组件被激活或停用时执行一些特定的逻辑。

3.LRU缓存策略 <keep-alive> 组件还实现了 LRU（Least Recently Used）缓存策略，用于在缓存达到最大数量时，淘汰最近最少使用的组件实例。可以通过 max 属性来设置缓存的最大数量。

<keep-alive :max="10">
  <component :is="currentComponent"></component>
</keep-alive>

在这个例子中，最多缓存 10 个组件实例，当超过这个数量时，最近最少使用的组件实例会被淘汰。