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

最近在做一个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页面刷新展示不同内容
  

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

目前项目整体结构如下：

<template>
 <div id="app">
  <keep-alive>
   <router-view v-if="$route.meta.keepalive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepalive"></router-view>
 </div>
</template>

虽然官方提供了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内部组件之后，不在支持动态销毁组件，缓存一直存在，只能从源头上下手，清掉缓存。

export const removecatch = {
 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)
         {
           var key = this.$vnode.key == null
                 ? this.$vnode.componentoptions.ctor.cid + (this.$vnode.componentoptions.tag ? `::${this.$vnode.componentoptions.tag}` : '')
                 : this.$vnode.key;
           var cache = this.$vnode.parent.componentinstance.cache;
           var keys = this.$vnode.parent.componentinstance.keys;
           if (cache[key])
           {
             if (keys.length) {
               var index = keys.indexof(key);
               if (index > -1) {
                 keys.splice(index, 1);
               }
             }
             delete cache[key];
           }
         }
       }
     }
     this.$destroy();
   }
   next();
 }
};

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

总结

以上所述是小编给大家介绍的vue移动端项目缓存问题实践记录，希望对大家有所帮助