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阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 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
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
劳动实践课感言
2014/02/01 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
病媒生物防治方案
2014/05/13 职场文书
毕业生找工作求职信
2014/08/05 职场文书
三方协议书
2015/01/27 职场文书
信息简报范文
2015/07/21 职场文书