Vue中的keep-alive缓存组件的理解

<keep-alive> 是一个抽象组件，用于将其内部的组件保留在内存中，而不会重新渲染。这意味着当组件在<keep-alive> 内部切换时，其状态将被保留，而不是被销毁和重新创建。

         <keep-alive>用来缓存不经常变化的组件，以提高性能，当我们在不同路由之间进行切换或者是动态改变组件时，<keep-alive>可以确保被缓存的组件保留之前的一个状态，而不会重新执行created和mounted等生命周期钩子函数。
        那么<keep-alive>会提供activated 和 deactivated 生命周期钩子函数的应用，这两个生命周期钩子函数是在缓存组件时或失去缓存组件时进行的触发。

        activated钩子函数叫做激活状态，也就是组件当被激活的时候进行的调用，这时候组件从<keep-alive>缓存中变为一个激活的状态，将会再次的插入到页面当中进行一个渲染显示。

        deactivated钩子函数是当缓存的组件失去我们的活力调用时触发，这时组件从页面当中移除并且从新添加到<keep-alive>缓存当中。

那么我们可以在activated钩子中进行内部数据的初始化操作，而在deactivated钩子中进行数据的清理以确保每次被激活时都有正确的一个状态，如果组件处于一些外部服务的应用，比如websocked连接，或者定时器操作等等，则可以在activated中开始或启动的一个服务，在deactivated当中关闭或停止某些服务，以避免浪费一些无效的一些资源，那么我们可以在组件切换的时候添加一些自定义的过渡或动画的效果，这样可以通过activated以及deactivated钩子中去触发我们的动画效果或者是相应的业务逻辑来进行实现。

总的来说，activated和deactivated生命周期钩子函数为我们提供了在缓存的组件状态变换时执行一些特殊的业务逻辑的一个操作功能。

        那么对于<keep-alive>来说，除了生命周期钩子函数的一个影响，还有其他属性的一个设置，比如include 和 exclude 属性的设置. 主键的include和exclude属性是用于配置那些主键是用来缓存，那些组件是不应该被缓存，而它们的属性可以接收的数据类型，主要包括了字符串，正则表达式或字符串的数组内容。

原理：缓存函数中的max，也就是最大值，它采用的并不是队列，而是LRU（缓存淘汰策略）

LRU (Least Recently Used) 是一种缓存淘汰策略用于在缓存容量不足时确定哪些数据项被移除。其基本思想是保留最近被访问过的数据，而淘汰最长时间没有被访问的数据。LRU算法通过维护一个访问顺序列表来实现这个目标。

（LRU的思想就是保留最近被访问的数据，而淘汰最长时间未被访问的数据,那么LRU算法通过维护一个访问序列表来实现这个目标，例如：当一个数据项被访问的时候，我们会将其移动到顺序列表的头部，表示最近被使用过，当需要淘汰一个数据的时候，选择列表尾部的数据进行移除，这时表示没有被使用过的数据，这种方式保证了访问过的数据项保持在我们列表的头部，而不常访问的数据项逐渐会移动到我们列表的尾部，当需要淘汰数据的时候，只需要移除尾部的数据即可。）

以下是模拟LRU算法的一些代码示例：

<script>
    class LRUCache{
        constructor(capacity){
            this.capacity = capacity; // 缓存容量
            this.cache = new Map(); // 使用 Map 数据结构存储缓存数据，以键值对的形式保存
        }
 
        get(key) {
            if(this.cache.has(key)){ // 如果缓存中存在该键，则表示缓存命中
                const value = this.cache.get(key); // 获取对应键的值
                this.cache.delete(key); // 删除原有的键值对
                this.cache.set(key,value); // 将键值对重新放入缓存，保证最近使用的键值对在 Map 的末尾
                return value; // 返回获取到的值
            }else {
                return -1; // 如果缓存中不存在该键，则返回 -1 表示未命中
            }
        }
 
        put(key,value){
            if(this.cache.has(key)){ // 如果缓存中已经存在该键，则需要将其删除
                this.cache.delete(key);
            }else if(this.cache.size >= this.capacity){ // 如果缓存已满，需要删除最久未使用的键
                const oldestkey = this.cache.keys().next().value; // 获取 Map 中第一个键，即最久未使用的键
                this.cache.delete(oldestkey); // 删除最久未使用的键值对
            }
            this.cache.set(key,value); // 将新的键值对放入缓存
        }
    }
 
    const lruCache = new LRUCache(3); // 创建容量为 3 的 LRUCache 对象
 
    lruCache.put(1,1); // 将键值对 (1, 1) 放入缓存
    lruCache.put(2,2); // 将键值对 (2, 2) 放入缓存
    lruCache.put(3,3); // 将键值对 (3, 3) 放入缓存
 
    console.log(lruCache.get(1)); // 获取键为 1 的值，输出 1
 
    lruCache.put(4,4); // 将键值对 (4, 4) 放入缓存，此时缓存已满，需要删除最久未使用的键值对
 
    console.log(lruCache.get(2)); // 获取键为 2 的值，由于键 2 已经被删除，返回 -1
</script>

代码007普通

打赏 收藏 海报 链接