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创建div 实现代码
Apr 27 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php实现的递归提成方案实例
2015/11/14 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python 判断自定义对象类型
2009/03/21 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
详解python中的闭包
2020/09/07 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
教师业务培训方案
2014/05/01 职场文书
护士医德医风自我评价
2014/09/15 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
常用的Python代码调试工具总结
2021/06/23 Python