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 ui dialog里调用datepicker的问题
Aug 06 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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 字符串分割和比较
2009/10/06 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python中的rfind()方法使用详解
2015/05/19 Python
python分割列表(list)的方法示例
2017/05/07 Python
python绘制多个曲线的折线图
2020/03/23 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
打架检讨书50字
2014/01/11 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
歌咏比赛主持词
2015/06/29 职场文书
小学生运动会广播
2015/08/19 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android