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 相关文章推荐
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
js实现新年倒计时效果
Dec 10 Javascript
轻松搞定js表单验证
Oct 13 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
简单的js计算器实现
2016/10/26 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
python学习必备知识汇总
2017/09/08 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
高中的自我鉴定
2013/12/16 职场文书
加工操作管理制度
2014/01/19 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书