如何管理Vue中的缓存页面

2023-07-05 19:24:14 65

Vue中内置的组件可以帮助我们在开发SPA应用时，通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面)，显著提高页面二次访问速度，但是也给我们在某些场景带来了困扰，其中包含两个主要矛盾：

缓存页面如何在合适的时机被销毁（keep-alive组件提供了三个参数来动态配置缓存状态，但是作用有限，后面分析）
同一个路径如何缓存多个不同的页面(同页不同参)，比如淘宝商品页面继续跳转另一个商品页面

本文主要围绕这两个问题探讨，后文用问题一和问题二指代。

本文默认所有页面都是keep-alive

问题一销毁

当随着业务逻辑变得复杂，路由栈也逐渐升高，理论上用户可以无限的路由下去，不可避免的我们需要管理这些缓存在内存中的页面数据，页面数据包含两部分，Vue实例和对应的Vnode。查看Vue源码中src/core/components/keep-alive.js关于缓存的定义

this.cache=Object.create(null)//用来缓存vnodecache[key]=>Vnode
this.keys=[]//用来记录已缓存的vnode的key

缓存后并不会重用Vnode，而是只用它上面挂载的Vue实例。

if(cache[key]){
vnode.componentInstance=cache[key].componentInstance//仅从缓存的vnode中获取vue实例挂在到新的vnode上
//makecurrentkeyfreshest
remove(keys,key)
keys.push(key)
}

为什么不用呢，因为有BUG，最早一版实现里确实是会直接使用缓存的Vnode。

出自src/core/components/keep-alive.jsinitversion

exportdefault{
created(){
this.cache=Object.create(null)
},
render(){
constchildNode=this.$slots.default[0]
constcid=childNode.componentOptions.Ctor.cid
if(this.cache[cid]){
constchild=childNode.child=this.cache[cid].child//直接获取缓存的vnode
childNode.elm=this.$el=child.$el
}else{
this.cache[cid]=childNode
}
childNode.data.keepAlive=true
returnchildNode
},
beforeDestroy(){
for(constkeyinthis.cache){
this.cache[key].child.$destroy()
}
}
}

我们需要管理的其实就是cache和keys，keep-alive提供了三个参数来动态管理缓存：

include-只有名称匹配的组件会被缓存。
exclude-任何名称匹配的组件都不会被缓存。
max-最多可以缓存多少组件实例。

它们的作用非常简单，源码写的也很简单易读：

所以当我们想要管理这些缓存时，简单的方案就是操作这三个参数，修改include和exclude来缓存或者清除某些缓存，但是需要注意的是它们匹配的是组件的name：

出自src/core/components/keep-alive.js

constname:?string=getComponentName(componentOptions)

所以清除缓存是会无差别的把某个组件的所有实例全部清除，这显然不满足我们的需求。

max的逻辑则是超过最大值时清除栈底的缓存，

出自src/core/components/keep-alive.js：

if(this.max&&keys.length>parseInt(this.max)){
pruneCacheEntry(cache,keys[0],keys,this._vnode)
}

我们要解决问题一，官方提供给的API走不通，我们只能自己来了，我们需要的是解决两个子问题：

什么时候销毁
怎么销毁

1.怎么销毁

先看怎么销毁，如果想销毁一个实例很简单，可以直接用this.$destroy(),这样可以吗，不行，这样缓存cache和keys中依旧保留了原来的vnode和key，再次访问时就会出现问题，vnode一直被留存，但是它身上的实例已经被销毁了，这时候在vue的update过程中就会再去创建一个vue实例，也就是说只要某个keep-alive的页面调用过一次this.$destroy()，但是没有清理缓存数组，这个页面之后被重新渲染时就一定会重新创建一个实例，当然重新走全部的生命周期。现象最终就是这个页面就像是没有被缓存一样。

this.$destroy();//不适合keep-alive组件

所以销毁需要同时清理掉缓存cache和keys，下面定义了一个同时清除缓存的$keepAliveDestroy方法：

constdtmp=Vue.prototype.$destroy;
constf=function(){
if(this.$vnode&&this.$vnode.data.keepAlive){
if(this.$vnode.parent&&this.$vnode.parent.componentInstance&&this.$vnode.parent.componentInstance.cache){
if(this.$vnode.componentOptions){
varkey=!isDef(this.$vnode.key)
?this.$vnode.componentOptions.Ctor.cid+(this.$vnode.componentOptions.tag?`::${this.$vnode.componentOptions.tag}`:'')
:this.$vnode.key;
varcache=this.$vnode.parent.componentInstance.cache;
varkeys=this.$vnode.parent.componentInstance.keys;
if(cache[key]){
if(keys.length){
varindex=keys.indexOf(key);
if(index>-1){
keys.splice(index,1);
}
}
deletecache[key];
}
}
}
}
dtmp.apply(this,arguments);
}
Vue.prototype.$keepAliveDestroy=f;

2.什么时候销毁

那么什么时候销毁呢，有两个触发时机：

replace时，页面A--replace-->页面B（清除页面A）
routeback时,页面A--push-->页面B--back-->页面A（清除页面B）

replace比较简单，我们可以直接拦截router的replace方法，在该方法中清除掉当前页面。（这里也有例外，比如切换Tab时，最后再说）

我们具体来看看routeback这种情况，如果说我们的页面上有一个返回键，那么在这里清除缓存是非常正确的时机，但是我们不能忽略浏览器自带的返回键和安卓机上的物理返回键，这种情况考虑进来以后，仅使用返回键的方案就不能满足了。

2.1方案一使用route.query记录当前页面栈深度

每次push或者replace是都增加query上一个参数，来记录当前深度

this.$router.push({
path:"/targer",
query:{
stackLevel:Number(this.$route.query.stackLevel)+1	
}
})

这个方案有明显弊端，外部暴露一个参数是非常丑陋且危险的，用户可以随便修改，在进行网页推广时，业务去生产环境自己拷贝到的推广链接也可能带着一个奇怪的https://xxx.com/foo?bar=123&stackLevel=13后缀。弃用

2.2方案二使用Vue实例自身记录当前栈深度

hack掉router的push和replace方法以后,每次跳转的时候都可以给目标页的vm挂载一个_stackLevel,这样就解决了方案一的问题，不暴露给用户，URL中不可见，也无法修改，但是我们不能忽视浏览器中另一个恶魔——刷新键,在刷新的时候URL不会变，但是vm实例就需要重新创建了，那么我们的栈深度标示也就丢失了。弃用

2.3方案三使用history.state记录栈深度

那么最终就是既可以对用户不可见，又可以在刷新的时候得以保存。那就是history.state了，所以我们需要做的就是把stack深度保存到history.state中，它能够完整的保存整个路由链条。

当我们获取到目标页面栈深度小于当前页面时，我们就可以销毁当前页面了。

if(target.stack
问题二同页不同参缓存多个实例
可以在源码中看到src/core/components/keep-alive.js
constkey:?string=vnode.key==null
//sameconstructormaygetregisteredasdifferentlocalcomponents
//socidaloneisnotenough(#3269)
?componentOptions.Ctor.cid+(componentOptions.tag?`::${componentOptions.tag}`:'')
:vnode.key
if(cache[key]){
vnode.componentInstance=cache[key].componentInstance
//makecurrentkeyfreshest
remove(keys,key)
keys.push(key)
}else{
cache[key]=vnode
keys.push(key)
//pruneoldestentry
if(this.max&&keys.length>parseInt(this.max)){
pruneCacheEntry(cache,keys[0],keys,this._vnode)
}
}

一个vnode如果没有key才会使用组件名，所以默认缓存中的key是组件名，如果组件相同时，我们在每个页面都有自己的key就可以解决这个问题了，如何实现每个页面拥有自己的key呢。有两个子问题：

如何做到唯一
如何把key赋值给页面的vnode



1.如何做到唯一


1.1时间戳、超大随机数
key=Date.now()
1.2路由栈高度+路径名
key=vm._stack+router.currentRoute.path这个方案利用当前的栈高度+路径名，为什么需要路径名呢，因为replace的时候栈高度不变，只是路径名变了。
2.如何把key赋值给页面的vnode


目前有两个方案给vue-router当前的Vnode的key来赋值：
2.1通过route.query动态绑定Key


这个方案实现比较简单
//绑定key
...

...


//push时
this.$router.push({
path:"/foo",
query:{
	routerKey:Date.now()//随机key
}
})

这种方式用起来非常简单有效，但是缺点同样也是会暴露一个奇怪的参数在URL中
2.2通过获取到Vnode直接赋值


在哪个阶段给Vnode的key赋值呢，答案显而易见，在keep-alive组件render函数进入前，src/core/components/keep-alive.js
...
render(){
constslot=this.$slots.default
constvnode:VNode=getFirstComponentChild(slot)
...

我们可以hack掉keep-alive的render函数，然后在这之前先把slot里的第一个子节点拿到以后，给它的key进行赋值，然后再调用keep-alive的render：
consttmp=vm.$options.render//vmiskeep-alivecomponentinstance
vm.$options.render=function(){
constslot=this.$slots.default;
constvnode=getFirstComponentChild(slot)//vnodeisakeep-alive-component-vnode
if(historyShouldChange){
if(!isDef(vnode.key)){
if(isReplace){
vnode.key=genKey(router._stack)
}elseif(isPush()){
vnode.key=genKey(Number(router._stack)+1)
}else{
vnode.key=genKey(Number(router._stack)-1)
}
}
}else{
//whenhistoryShouldChangeisfalseshouldrerenderonly,shouldnotcreatenewvm,usethesamevnode.keyissue#7
vnode.key=genKey(router._stack)
}
returntmp.apply(this,arguments)
}


总结


通过以上对于问题的分析，我们就解决了自动管理缓存的核心难题。本文是对开源库vue-router-keep-alive-helper的一次总结，此库是款简单易用的keep-alive缓存自动化管理工具，从此告别Vue缓存管理难题。如果对你有用，感谢慷慨Star。
演示DemoSampleCode
Bilibili演示视频感谢三连。
以上就是如何管理Vue中的缓存页面的详细内容，更多关于vue缓存页面的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

如何管理Vue中的缓存页面

问题一销毁

1.怎么销毁

2.什么时候销毁

2.1方案一使用route.query记录当前页面栈深度

2.2方案二使用Vue实例自身记录当前栈深度

2.3方案三使用history.state记录栈深度

问题二同页不同参缓存多个实例

1.如何做到唯一

1.1时间戳、超大随机数

1.2路由栈高度+路径名

2.如何把key赋值给页面的vnode

2.1通过route.query动态绑定Key

2.2通过获取到Vnode直接赋值

总结

热门推荐

随机推荐