vue中keep-alive使用的那些天坑

keep-alive是vue内置组件,白话来说就是把你想要缓存的东西缓存到内存,避免重新渲染Dom,vue本身是单页面,而keep-alive对单页面以及mode:history模式下有效

版本2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件,2.2后加入了beforeRouteUpdate钩子函数(后面在补充)

应用场景:只有从C页面进入B页面可以缓存,其它任何页面进入都清除缓存回到初始状态

一、配置路由 router文件下的index.js

开启keepAlive

二、缓存整个模板,配置app.vue,即主页面

需要注意    需要注意    需要注意重要的事情说三遍

            v-if的判断要加载router-view,若是加载在keep-alive无法实现缓存。

三、由于只要缓存B页面,为了减少不必要的冗余,将控制缓存的钩子函数都放在B页面

需要先了解两个重要的点:

1、生命周期钩子函数的加载顺序

成功开启keep-alive,可以考虑调用两个新的钩子函数:activated、deactivated

第一次为调取缓存的加载顺序,开启了keep-alive后,当再次进入(前进或者后退)时,只触发activated,退出时触发deactivated。

        beforeCreate->created->beforeMount-> mounted-> activated

注意:使用keep-alive,调用 $destory() 需要谨慎,否则页面不再被缓存

2、Vue-Router路由组件内的守卫:

四、缓存设置B页面


安卓从其它页面!!第一次!!进入后,手机自带返回按钮第一次返回,无法缓存,第二次则正常缓存

!!!!!!遇到的坑

1、B页面根据url自带参数不同,可以通过reload重新刷新页面,若从A先进入/b/2,通过/b/2进入/c/2,返回后回到/b/2跳转前的位置,

     此时,从A进入/b/1,,通过/b/1进入/c/1,返回后回到仍然缓存的是/b/2跳转前的位置

解决方法:一直钻进死胡同,在路由组件守卫那打转,考虑如何清除上一次的缓存,有查到一种方法,通过获取节点一层层找到相应的cache,

                    后清除,什么时候清楚,如何重新加载,慎用$destory(),涉及到的问题太多,最后选择了暴力的解决方法

                    !!罗列出多种出现问题的情况,发现了一个最直接的原因:this.$router.push,页面的重新reload的时候自可清楚之前的缓存,所直接暴力的window.location.href=url;这样的缓存都是在beforeRouteLeave时记录缓存

2、安卓从A页面<第一次>进入后/b/1,通过/b/1进入/c/1,从C返回B时,手机自带返回按钮第一次返回,无法缓存,第二次则正常缓存(浏览器自带以及自己甚至的返回一切正常)

    解决方法:在beforeRouteEnter时,判断若是去C的时候,修改route中的keepAlive进行缓存

3、涉及到微信的实时分享,在返回时,调取了缓存,分享的数据仍会记录之前的C页面的分享状态

解决方法:具体的思路参考第三点第1条生命周期钩子函数的加载顺序

关于安卓物理返回的问题待补充。。。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容