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


Posted in Javascript onOctober 29, 2018

最近在做一个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移动端项目缓存问题实践记录,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
浅析JS异步加载进度条
May 05 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 #Javascript
You might like
php实现singleton()单例模式实例
2014/11/06 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python3 Random模块代码详解
2017/12/04 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
python numpy 反转 reverse示例
2019/12/04 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python matlab库简单用法讲解
2020/12/31 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
小学生打架检讨书
2014/01/26 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
学校师德承诺书
2014/05/23 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
政风行风评议整改方案
2014/09/15 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
学生个人评语大全
2015/01/04 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang