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 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
js中日期的加减法
May 06 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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 mysql索引问题
2008/06/07 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
css3学习心得分享
2013/08/19 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
促销活动方案模板
2014/02/24 职场文书
条幅标语大全
2014/06/20 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
酒店宣传语大全
2015/07/13 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
nginx lua 操作 mysql
2022/05/15 Servers