1.彻底揭秘keep-alive
2.keep-alive的码解vue2和vue3的源码以及LRU算法
3.通过源码理解http层和tcp层的keep-alive
4.Vue 全站缓存之 keep-alive ： 动态移除缓存
5.深入源码和内核，一篇文章彻底理解数据库的码解各种超时参数-事务超时/查询超时/连接超时/登录超时/套接字超时
6.Vue原理之keep-alive组件

彻底揭秘keep-alive

       深入剖析keep-alive的实现与应用，本文将详细讲解其背后的码解原理和使用场景。keep-alive组件在Vue中用于缓存不活动的码解组件实例，而非销毁它们，码解从而在动态路由切换时保存组件的码解源码 诱导状态，提升性能。码解

       keep-alive的码解应用场景广泛，比如当用户在列表页面进行筛选后进入详情页面，码解再切换回列表页面时，码解希望筛选条件或选中状态保持不变。码解通过包裹列表组件于keep-alive内，码解可以避免组件重复渲染，码解优化用户体验和系统效率。码解

       使用keep-alive的码解关键是理解其几个核心属性和功能，包括`include`、`exclude`及`max`。`include`指定了需要缓存的组件白名单，`exclude`则定义了不应缓存的黑名单，而`max`则设定了缓存组件的上限，超过此限制时，系统将使用LRU策略替换旧缓存。

       深入源码，keep-alive组件内嵌于Vue生态体系中，它对外暴露了组件的基本生命周期钩子以及几个主要配置属性。抽象属性设置为`true`对于组件缓存机制至关重要，其对组件的处理方式不同于其他普通组件。

       keep-alive的渲染机制与其他Vue组件存在差异。在初始化阶段，Vue实例与子组件建立父子关系时会考虑抽象属性的值。当组件设置为`abstract: true`时，bc cp qp 源码即跳过了该组件实例的渲染过程，从而避免了实际DOM节点的生成。这一特性显著优化了缓存组件的性能表现。

       当组件从缓存中被激活或进入活跃状态时，patch阶段执行了一系列操作，如`createComponent`函数实现了缓存组件的重新挂载过程。通过`keep-alive`属性的管理，组件在切换和返回时能够保持状态的一致性，而组件的重用机制使得在不同的渲染上下文中实现高效状态转换成为可能。

       了解keep-alive的钩子函数机制对于其高效应用至关重要。`activated`与`deactivated`钩子分别对应组件状态变化的两种极端情况，其执行策略避免了不必要的渲染过程，进一步提高了应用性能和响应速度。

       综上所述，掌握keep-alive的原理与应用能够显著优化Vue应用的性能与用户体验。通过对组件状态的缓存和智能管理，减少不必要的DOM操作，从而实现高效响应和流畅界面。

keep-alive的vue2和vue3的源码以及LRU算法

       0.LRU算法

       LRU（leastrecentlyused）根据数据的历史记录来淘汰数据，重点在于保护最近被访问/使用过的数据，淘汰现阶段最久未被访问的数据

       LRU的主体思想在于：如果数据最近被访问过,那么将来被访问的几率也更高

       经典的LRU实现一般采用双向链表+Hash表。借助Hash表来通过key快速映射到对应的链表节点，然后进行插入和删除操作。这样既解决了hash表无固定顺序的缺点，又解决了链表查找慢的缺点。

       但实际上在js中无需这样实现，可以参考文章第三部分。先看vue的keep-alive实现。

1.keep-alive

       keep-alive是vue中的内置组件，使用KeepAlive后，华夏重制版源码被包裹的组件在经过第一次渲染后的vnode会被缓存起来，然后再下一次再次渲染该组件的时候，直接从缓存中拿到对应的vnode进行渲染，并不需要再走一次组件初始化，render和patch等一系列流程，减少了script的执行时间，性能更好。

       使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

       当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

       从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

       在路由中设置keepAlive属性判断是否需要缓存。

2.vue2的实现

       实现原理：通过keep-alive组件插槽，获取第一个子节点。根据include、exclude判断是否需要缓存，通过组件的key，判断是否命中缓存。利用LRU算法，更新缓存以及对应的keys数组。根据max控制缓存的最大组件数量。

       先看vue2的实现：

exportdefault{ name:'keep-alive',abstract:true,props:{ include:patternTypes,exclude:patternTypes,max:[String,Number]},created(){ this.cache=Object.create(null)this.keys=[]},destroyed(){ for(constkeyinthis.cache){ pruneCacheEntry(this.cache,key,this.keys)}},mounted(){ this.$watch('include',val=>{ pruneCache(this,name=>matches(val,name))})this.$watch('exclude',val=>{ pruneCache(this,name=>!matches(val,name))})},render(){ constslot=this.$slots.defaultconstvnode:VNode=getFirstComponentChild(slot)constcomponentOptions:?VNodeComponentOptions=vnode&&vnode.componentOptionsif(componentOptions){ //checkpatternconstname:?string=getComponentName(componentOptions)const{ include,exclude}=thisif(//notincluded(include&&(!name||!matches(include,name)))||//excluded(exclude&&name&&matches(exclude,name))){ returnvnode}const{ cache,keys}=thisconstkey:?string=vnode.key==null?componentOptions.Ctor.cid+(componentOptions.tag?`::${ componentOptions.tag}`:''):vnode.keyif(cache[key]){ vnode.componentInstance=cache[key].componentInstance//makecurrentkeyfreshestremove(keys,key)keys.push(key)}else{ cache[key]=vnodekeys.push(key)//pruneoldestentryif(this.max&&keys.length>parseInt(this.max)){ pruneCacheEntry(cache,keys[0],keys,this._vnode)}}vnode.data.keepAlive=true}returnvnode||(slot&&slot[0])}}

       可以看到<keep-alive>组件的实现也是一个对象，注意它有一个属性abstract为true，是一个抽象组件，它在组件实例建立父子关系的时候会被忽略，发生在initLifecycle的过程中：

//忽略抽象组件letparent=options.parentif(parent&&!options.abstract){ while(parent.$options.abstract&&parent.$parent){ parent=parent.$parent}parent.$children.push(vm)}vm.$parent=parent

       然后在?created?钩子里定义了?this.cache?和?this.keys，用来缓存已经创建过的?vnode。

       <keep-alive>直接实现了render函数，执行<keep-alive>组件渲染的时候，就会执行到这个render函数，接下来我们分析一下它的实现。

       首先通过插槽获取第一个子元素的反汇编软件源码vnode：

constslot=this.$slots.defaultconstvnode:VNode=getFirstComponentChild(slot)

       <keep-alive>只处理第一个子元素，所以一般和它搭配使用的有component动态组件或者是router-view。

       然后又判断了当前组件的名称和include、exclude（白名单、黑名单）的关系：

//checkpatternconstname:?string=getComponentName(componentOptions)const{ include,exclude}=thisif(//notincluded(include&&(!name||!matches(include,name)))||//excluded(exclude&&name&&matches(exclude,name))){ returnvnode}functionmatches(pattern:string|RegExp|Array<string>,name:string):boolean{ if(Array.isArray(pattern)){ returnpattern.indexOf(name)>-1}elseif(typeofpattern==='string'){ returnpattern.split(',').indexOf(name)>-1}elseif(isRegExp(pattern)){ returnpattern.test(name)}returnfalse}

       组件名如果不满足条件，那么就直接返回这个组件的vnode，否则的话走下一步缓存：

const{ cache,keys}=thisconstkey:?string=vnode.key==null?componentOptions.Ctor.cid+(componentOptions.tag?`::${ componentOptions.tag}`:''):vnode.keyif(cache[key]){ vnode.componentInstance=cache[key].componentInstance//makecurrentkeyfreshestremove(keys,key)keys.push(key)}else{ cache[key]=vnodekeys.push(key)//pruneoldestentryif(this.max&&keys.length>parseInt(this.max)){ pruneCacheEntry(cache,keys[0],keys,this._vnode)}}

       如果命中缓存，则直接从缓存中拿vnode的组件实例，并且重新调整了key的顺序放在了最后一个；否则把vnode设置进缓存，如果配置了max并且缓存的长度超过了this.max，还要从缓存中删除第一个。

       这里的实现有一个问题：判断是否超过最大容量应该放在put操作前。为什么呢？我们设置一个缓存队列，都已经满了你还塞进来？最好先删一个才能塞进来新的。

       继续看删除缓存的实现：

functionpruneCacheEntry(cache:VNodeCache,key:string,keys:Array<string>,current?:VNode){ constcached=cache[key]if(cached&&(!current||cached.tag!==current.tag)){ cached.componentInstance.$destroy()}cache[key]=nullremove(keys,key)}

       除了从缓存中删除外，还要判断如果要删除的缓存的组件tag不是当前渲染组件tag，则执行删除缓存的组件实例的$destroy方法。

       ————————————

       可以发现，vue实现LRU算法是通过Array+Object，数组用来记录缓存顺序，Object用来模仿Map的功能进行vnode的缓存（created钩子里定义的this.cache和this.keys）

2.vue3的实现

       vue3实现思路基本和vue2类似，这里不再赘述。主要看LRU算法的实现。

       vue3通过set+map实现LRU算法：

constcache:Cache=newMap()constkeys:Keys=newSet()

       并且在判断是否超过缓存容量时的实现比较巧妙：

if(max&&keys.size>parseInt(maxasstring,)){ pruneCacheEntry(keys.values().next().value)}

       这里巧妙的利用Set是可迭代对象的特点，通过keys.value()获得包含keys中所有key的可迭代对象，并通过next().value获得第一个元素，然后进行删除。

3.借助vue3的思路实现LRU算法

       Leetcode题目——LRU缓存

varLRUCache=function(capacity){ this.map=newMap();this.capacity=capacity;};LRUCache.prototype.get=function(key){ if(this.map.has(key)){ letvalue=this.map.get(key);//删除后，再set，相当于更新到map最后一位this.map.delete(key);this.map.set(key,value);returnvalue;}return-1;};LRUCache.prototype.put=function(key,value){ //如果已经存在，那就要更新，怎么查看py源码即先删了再进行后面的setif(this.map.has(key)){ this.map.delete(key);}else{ //如果map中不存在，要先判断是否超过最大容量if(this.map.size===this.capacity){ this.map.delete(this.map.keys().next().value);}}this.map.set(key,value);};

       这里我们直接通过Map来就可以直接实现了。

       而keep-alive的实现因为缓存的内容是vnode，直接操作Map中缓存的位置代价较大，而采用Set/Array来记录缓存的key来模拟缓存顺序。

       参考：

       LRU缓存-keep-alive实现原理

       带你手撸LRU算法

       Vue.js技术揭秘

原文;/post/

通过源码理解http层和tcp层的keep-alive

       理解HTTP层与TCP层的keep-alive机制是提升网络通信效率的关键。本文将通过源码解析，深入探讨如何在HTTP与TCP层实现keep-alive功能。

       1.

       HTTP层的keep-alive

       以nginx为例，解析HTTP报文时，若客户端发送了connection:keep-alive头，则nginx将维持此连接。配置中设定的过期时间与请求数限制，通过解析头信息与设置全局变量实现。

       在解析HTTP头后，通过查找配置中的对应处理函数，进一步处理长连接。当处理完一个HTTP请求时，NGINX将连接状态标记为长连接，并设置相应标志。当连接达到配置的时间或请求数限制时，NGINX将关闭连接，释放资源。

       2.

       TCP层的keep-alive

       TCP层提供的keep-alive功能更为全面，通过Linux内核配置进行调整。默认配置与阈值设定共同作用于keep-alive功能。

       通过setsockopt函数可动态设置TCP层的keep-alive参数，实现不同场景下的keep-alive策略。超时处理通过系统内核函数完成，确保在长时间无数据传输时，能够及时释放资源，避免占用系统连接。

       总结：HTTP层与TCP层的keep-alive机制通过不同方式实现长连接的维护与管理，有效提高了网络通信的效率与资源利用率。深入理解其源码实现，有助于在实际应用中更灵活地配置与优化网络连接策略。

Vue 全站缓存之 keep-alive ： 动态移除缓存

       本文将探讨如何在 Vue 开发项目中实现全站缓存的动态管理，特别关注如何解决 keep-alive 组件在页面切换时的缓存问题。通常情况下，Vue 开发者会使用 Vuex 或 localStorage 进行页面间的数据存储与调用。然而，这种做法并不科学且缺乏优雅性。keep-alive 组件提供了一种保留组件实例的方法，但默认情况下，所有组件数据均被保留，这在用户前进操作时形成障碍。为了解决此问题，本文提出并实施了一个解决方案，通过直接操作 keep-alive 组件内部的缓存列表，实现组件的动态销毁，进而解决缓存问题。

       在文章开头，我们引入了一个记账项目的例子，以说明页面间互动行为的两种情况：用户前进和后退。keep-alive 组件在后退时能有效保留数据，但在前进时则无法实现进入新页面的预期效果。为解决这一问题，官方提供了 include 和 exclude 特性，允许开发者自定义哪些页面使用缓存。然而，这并没有解决如何根据需求灵活使用缓存的问题。因此，有人提出了在离开页面时销毁该页面的想法，但实验证明此法存在组件销毁而缓存仍存在的 bug。

       为解决这个问题，开发者研究了 keep-alive 的源代码，并在其中寻找了一个关键点：在组件销毁时判断其是否已被缓存，进而决定是否使用缓存。然而，这一尝试并未获得通过。因此，开发者转向寻找其他解决方案，并在打印组件变量的过程中发现了 keep-alive 组件的 cache 列表。通过在组件销毁前直接操作此列表，实现缓存的动态删除，问题迎刃而解。

       本文提出的解决方案提供了一种直接且暴力的方法，即在组件销毁前，寻找对应路由组件的 keep-alive 组件，然后控制其 cache 列表，以强制删除缓存。通过这一手段，可以有效解决 keep-alive 组件在页面切换时的缓存问题。文章最后，作者强调了 keep-alive 默认不支持动态销毁缓存的限制，并指出了解决方案的局限性。同时，作者预告了后续文章将深入讨论如何在前后页之间进行数据传递的解决方案。

深入源码和内核，一篇文章彻底理解数据库的各种超时参数-事务超时/查询超时/连接超时/登录超时/套接字超时

       深入源码和内核，一篇文章彻底理解数据库的各种超时参数-事务超时/查询超时/连接超时/登录超时/套接字超时

       数据库在运行过程中，可能会遇到各种超时问题，尤其是在网络不稳定或业务高并发场景下。理解这些超时的原理、工作机制以及不同数据库中的超时参数设置，对于排查异常情况和优化应用性能至关重要。本文将带你深入了解数据库超时参数的细节。

       数据库的超时参数主要包括事务超时、查询超时、连接超时、登录超时和套接字超时。除了这些常见的超时参数，客户端的JDBC应用程序和服务端的数据库管理系统还可能在服务器上配置操作系统级别的基于TCP keep-alive的超时检测和保活机制，以及套接字级别的基于TCP keep-alive的超时检测和保活机制。

       事务超时，即transaction timeout，指限制事务中所有语句处理时间之和的最大值。事务超时通常在应用框架中进行配置，例如在Spring中使用注解@Transactional指定。

       查询超时，即query timeout，限制SQL语句的最大执行时间。当执行时间超过指定的超时时间，应用端的数据库驱动程序会抛出超时异常，并发送取消执行信号给数据库管理系统，由数据库管理系统取消执行。

       连接超时，即connectTimeout，驱动程序建立TCP连接的超时时间。

       登录超时，即loginTimeout，是数据库用户成功登录到数据库服务器的超时时间。考虑到登录过程中的TCP连接建立和认证，配置登录超时时通常需要大于连接超时。

       常规的套接字超时socket timeout同样适用于JDBC应用程序，用于检测和感知网络层面TCP连接异常，避免僵死连接造成的无限等待。

       登录超时、连接超时和套接字超时之间存在差异，但它们都与网络层面的通信和状态检查有关。在配置和理解这些超时参数时，需要区分它们的作用范围和相互关系。

       查询超时的工作机制在不同数据库管理系统和驱动下略有不同，但基本原理相似。通常通过独立线程跟踪语句执行时间，在超时后抛出错误，并通过底层连接发送取消执行信号给数据库管理系统。

       在配置常见数据库的套接字超时时，需要注意不同的数据库管理系统可能有不同的配置方式。了解和应用这些配置可以有效优化数据库性能和稳定性。

       客户端和服务器端通常都具备基于TCP keep-alive的超时检测和保活机制。在某些情况下，还可以配置套接字级别的基于TCP keep-alive的超时检测和保活机制，进一步提高网络通信的可靠性。

Vue原理之keep-alive组件

       Vue原理解析：keep-alive组件的运用与机制

       Vue内置的keep-alive组件旨在实现组件的智能缓存，当页面间切换时，非活动组件会被保留而非销毁，以保持用户状态的连续性。例如，当从页面A跳转到B，若使用keep-alive，再次返回A时，搜索框的输入将被保留。

       如何运用keep-alive呢？它提供了三个内置属性，允许精确控制哪些组件缓存和哪些不缓存，以及设定缓存组件的最大数量。同时，它还提供了两个特殊生命周期钩子，仅在组件被keep-alive包裹时触发，但在2.1.0版本之后，若排除组件则不受影响，且在服务端渲染中也无效。初次加载时，created、mounted和activated会被依次触发，退出时调用deactivated，再次进入时仅触发activated。

       深入了解keep-alive的原理，我们从源码出发。其核心包括三个步骤：首先，根据render中的vnodeToCache判断并缓存组件，构建数据结构并存储在cache数组和keys数组中。然后，检查是否达到最大缓存限制，如有则清理超出部分。最后，监听include和exclude的变动，相应地销毁对应的组件。