vue移动端项目缓存问题实践记录

2023-09-06 12:36:05 162

最近在做一个vue移动端项目，被缓存问题搞得头都大了，积累了一些经验，特此记录总结下，权当是最近项目问题的一个回顾吧！

先描述下问题场景：A页面->B页面->C页面。假设A页面是列表页面，B页面是列表详情页面，C页面是操作改变B页面的一些东西，进行提交类似的操作。A页面进入B页面，应该根据不同的列表item显示不一样的详情，从B进入C，也应该根据item的标识比如ID展示不一样的内容，在C页面操作后，返回B页面，B页面数据发生变化。这个时候会有两种情况：

C页面操作数据后返回B页面，B页面对应数据应该发生变化。
C页面直接点击左上角箭头返回，B页面对应数据不应该发生变化。继续返回A列表页面，换一条数据，继续进入B页面，B页面展示不同内容，进入C页面，C页面刷新展示不同内容

另一种情况发生在写邮件的页面中，添加收件人，选人之后，继续添加，之前添加的联系人应该存在。但是从写邮件页面返回邮件列表再次进入写邮件页面，之前添加过的联系人数据就不应该存在了，这里就涉及到如何处理缓存，何时使用缓存，何时清除缓存的问题了。

目前项目整体结构如下：

虽然官方提供了include，exclude，可以让我们决定哪些组件使用缓存，哪些不使用缓存，但是并没有解决我们想动态使用缓存的目的，目前我的项目使用了如下两种方式处理缓存：

方式一，使用是否使用缓存标识

在路由文件router.js里给每个路由添加meta信息，标识是否使用缓存。

meta:{
isUseCache:false,//不使用缓存
keepAlive:true
}

使用方式：

A->B，B不能缓存;B->A,A缓存。

（1）A页面：

beforeRouteLeave(to,from,next){
//设置下一个路由的meta
if(to.path=='/B'){
to.meta.isUseCache=false;
}
next();
},
activated(){
if(!this.$route.meta.isUseCache){
this.getData();
}
}

(2)B页面

beforeRouteLeave(to,from,next){
//设置下一个路由的meta
if(to.path=='/A'){
to.meta.isUseCache=true;
}
next();
},
activated(){
if(!this.$route.meta.isUseCache){
this.getData();
}
}

方式二，强制清除缓存。

这种方式是从网上找的一种方式，使用了vue内部组件之后，不在支持动态销毁组件，缓存一直存在，只能从源头上下手，清掉缓存。

exportconstremoveCatch={
beforeRouteLeave:function(to,from,next){
if(from&&from.meta.rank&&to.meta.rank&&from.meta.rank>to.meta.rank)
{//此处判断是如果返回上一层，你可以根据自己的业务更改此处的判断逻辑，酌情决定是否摧毁本层缓存。
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=this.$vnode.key==null
?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];
}
}
}
}
this.$destroy();
}
next();
}
};

在需要清掉缓存的页面混合引入该js即可。

总结

以上所述是小编给大家介绍的vue移动端项目缓存问题实践记录，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue移动端项目缓存问题实践记录

热门推荐

随机推荐