Vue keep-alive的实现原理是什么

魁首哥

作者

Vue keep-alive的实现原理是什么

这篇“Vuekeep-alive的实现原理是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vuekeep-alive的实现原理是什么”文章吧。

keep-alive的实现原理

使用vue的时候，想必大家都是用过keep-alive，其作用就是缓存页面以及其状态。使用了这么久vue只知道如何使用但不明白其中原理，昨天翻看实现代码，这里做个笔记。

这里以vue3为例

整个组件的源码为：

constKeepAliveImpl={name:`KeepAlive`,//Markerforspecialhandlinginsidetherenderer.Wearenotusinga===//checkdirectlyonKeepAliveintherenderer,becauseimportingitdirectly//wouldpreventitfrombeingtree-shaken.__isKeepAlive:true,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(props:KeepAliveProps,{slots}:SetupContext){constcache:Cache=newMap()constkeys:Keys=newSet()letcurrent:VNode|null=nullconstinstance=getCurrentInstance()!//console.log('instance',instance)//KeepAlivecommunicateswiththeinstantiatedrendererviathe"sink"//wheretherendererpassesinplatform-specificfunctions,andthe//KeepAliveinstanceexposesactivate/deactivateimplementations.//ThewholepointofthisistoavoidimportingKeepAlivedirectlyinthe//renderertofacilitatetree-shaking.constsink=instance.sinkasKeepAliveSinkconst{renderer:{move,unmount:_unmount,options:{createElement}},parentSuspense}=sinkconststorageContainer=createElement('div')//console.log('sink',sink)sink.activate=(vnode,container,anchor)=>{move(vnode,container,anchor,MoveType.ENTER,parentSuspense)queuePostRenderEffect(()=>{constcomponent=vnode.component!component.isDeactivated=falseif(component.a!==null){invokeHooks(component.a)}},parentSuspense)}sink.deactivate=(vnode:VNode)=>{move(vnode,storageContainer,null,MoveType.LEAVE,parentSuspense)queuePostRenderEffect(()=>{constcomponent=vnode.component!if(component.da!==null){invokeHooks(component.da)}component.isDeactivated=true},parentSuspense)}functionunmount(vnode:VNode){//resettheshapeFlagsoitcanbeproperlyunmountedvnode.shapeFlag=ShapeFlags.STATEFUL_COMPONENT_unmount(vnode,instance,parentSuspense)}functionpruneCache(filter?:(name:string)=>boolean){cache.forEach((vnode,key)=>{constname=getName(vnode.typeasComponent)if(name&&(!filter||!filter(name))){pruneCacheEntry(key)}})}functionpruneCacheEntry(key:CacheKey){constcached=cache.get(key)asVNodeif(!current||cached.type!==current.type){unmount(cached)}elseif(current){//currentactiveinstanceshouldnolongerbekept-alive.//wecan'tunmountitnowbutitmightbelater,soresetitsflagnow.current.shapeFlag=ShapeFlags.STATEFUL_COMPONENT}cache.delete(key)keys.delete(key)}watch(()=>[props.include,props.exclude],([include,exclude])=>{include&&pruneCache(name=>matches(include,name))exclude&&pruneCache(name=>matches(exclude,name))},{lazy:true})onBeforeUnmount(()=>{cache.forEach(unmount)})return()=>{if(!slots.default){returnnull}constchildren=slots.default()letvnode=children[0]if(children.length>1){if(__DEV__){warn(`KeepAliveshouldcontainexactlyonecomponentchild.`)}current=nullreturnchildren}elseif(!isVNode(vnode)||!(vnode.shapeFlag&ShapeFlags.STATEFUL_COMPONENT)){current=nullreturnvnode}constcomp=vnode.typeasComponentconstname=getName(comp)const{include,exclude,max}=propsif((include&&(!name||!matches(include,name)))||(exclude&&name&&matches(exclude,name))){returnvnode}constkey=vnode.key==null?comp:vnode.keyconstcached=cache.get(key)//clonevnodeifit'sreusedbecausewearegoingtomutateitif(vnode.el){vnode=cloneVNode(vnode)}cache.set(key,vnode)if(cached){//copyovermountedstatevnode.el=cached.elvnode.anchor=cached.anchorvnode.component=cached.componentif(vnode.transition){//recursivelyupdatetransitionhooksonsubTreesetTransitionHooks(vnode,vnode.transition!)}//avoidvnodebeingmountedasfreshvnode.shapeFlag|=ShapeFlags.COMPONENT_KEPT_ALIVE//makethiskeythefreshestkeys.delete(key)keys.add(key)}else{keys.add(key)//pruneoldestentryif(max&&keys.size>parseInt(maxasstring,10)){pruneCacheEntry(Array.from(keys)[0])}}//avoidvnodebeingunmountedvnode.shapeFlag|=ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVEcurrent=vnodereturnvnode}}}

很容易看出keep-alive其实就是vue自己封装的一个组件，和普通组件一样。

再讲keep-alive组件前先了解下vue组件的整个渲染

大致流程如下

keep-alive生命周期

组件挂载：

调用setupStatefulComponent函数触发组件setup方法，其中组件的setup方法核心代码其实就几行：

return()=>{constchildren=slots.default()letvnode=children[0]cache.set(key,vnode)if(cached){vnode.el=cached.elvnode.anchor=cached.anchorvnode.component=cached.componentvnode.shapeFlag|=ShapeFlags.COMPONENT_KEPT_ALIVEkeys.delete(key)keys.add(key)}else{keys.add(key)}returnvnode}

主要逻辑为三：

1.确认需要渲染的slot、

2.将其状态置入缓存或读取已存在的缓存、

3.返回slot对应的vnode，紧接着调用setupRenderEffect，渲染出dom。

组件更新（slot变化）：

当slot变化后，首先会调用keep-alive组件的render即setup的返回函数，逻辑见上面setup方法。紧接着当某个slot卸载时，会调用deactivate函数，当某个slot重新挂载时，则会调用activate函数，核心代码如下：

conststorageContainer=createElement('div')sink.activate=(vnode,container,anchor)=>{move(vnode,container,anchor,MoveType.ENTER,parentSuspense)queuePostRenderEffect(()=>{constcomponent=vnode.component!component.isDeactivated=falseif(component.a!==null){invokeHooks(component.a)}},parentSuspense)}sink.deactivate=(vnode:VNode)=>{move(vnode,storageContainer,null,MoveType.LEAVE,parentSuspense)queuePostRenderEffect(()=>{constcomponent=vnode.component!if(component.da!==null){invokeHooks(component.da)}component.isDeactivated=true},parentSuspense)}

逻辑也很简单，当组件卸载时，将其移入缓存的dom节点中，调用slot的deactivate生命周期，当组件重新挂载时候，将其移入至挂载的dom节点中。

总结来说，keep-alive实现原理就是将对应的状态放入一个cache对象中，对应的dom节点放入缓存dom中，当下次再次需要渲染时，从对象中获取状态，从缓存dom中移出至挂载dom节点中。