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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
vue3.0 上手体验
Sep 21 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript调试说明
2010/06/07 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
前端性能优化建议
2020/09/17 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
淘宝客服自我总结鉴定
2014/01/25 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
安全宣传标语
2014/06/10 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
大学学生个人总结
2015/02/15 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
九九重阳节致辞
2015/07/31 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android