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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
JavaScript运算符小结
Jun 03 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
原生js实现下拉框选择组件
Jan 20 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
PHP系统流量分析的程序
2006/10/09 PHP
php中的数组操作函数整理
2008/08/18 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
Django 中 cookie的使用
2017/08/17 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
军训的自我鉴定
2013/12/10 职场文书
写求职信有什么意义
2014/02/17 职场文书
预备党员表决心书
2014/03/11 职场文书
拓展训练激励口号
2014/06/17 职场文书
工程质检员岗位职责
2015/04/08 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python