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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
详解Document.Cookie
Dec 25 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
小程序关于请求同步的总结
May 05 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 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发送邮件类代码附详细说明
2008/07/10 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
js简单抽奖代码
2015/01/16 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python版本的读写锁操作方法
2016/04/25 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python的语言类型(详解)
2017/06/24 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
社会实践感言
2014/01/25 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
贷款工作证明模板
2015/06/12 职场文书