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调试(不下载任何工具)
Apr 14 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
大学班长的职责
2014/01/27 职场文书
单身联谊活动方案
2014/01/29 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
高中生的自我评价
2014/03/04 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
低碳环保标语
2014/06/12 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
改革共识倡议书
2014/08/29 职场文书
华山导游词
2015/02/03 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python