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+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
jQuery 移除事件的方法
Jun 20 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维护文件系统
2006/10/09 PHP
论坛头像随机变换代码
2006/10/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
python append、extend与insert的区别
2016/10/13 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
校运会口号
2014/06/18 职场文书
四年级学生期末评语
2014/12/26 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
Python四款GUI图形界面库介绍
2022/06/05 Python