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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
js密码强度检测
Jan 07 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
完善的jquery处理机制
Feb 21 Javascript
详解JavaScript中return的用法
May 08 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
js实现双色球效果
Aug 02 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
DOM 高级编程
2015/05/06 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python之字典添加元素的几种方法
2020/09/30 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
写给老师的表扬信
2014/01/21 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
优秀班主任材料
2014/12/16 职场文书
行政处罚听证告知书
2015/07/01 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
Python读写yaml文件
2022/03/20 Python
vscode内网访问服务器的方法
2022/06/28 Servers