阅读本文之前&＃xff0c;默认大家对 vue 和 keep-alive 都很熟悉&＃xff0c;所以不再啰嗦相关资料&＃xff0c;直接进入正文。
有耐心的话&＃xff0c;且听我细细道来&＃xff0c;如果你遇到过类似问题&＃xff0c;或正在寻找解决方案&＃xff0c;那么你可以直接翻到文末看结论。
前言
以一个记账项目举例&＃xff0c;常见的场景有首页、记到账页面、选择合同、新建合同、选择客户、新建客户这些页面。
![]()
在这些页面中&＃xff0c;很显然&＃xff0c;用户的浏览行为应该是逐渐深入的&＃xff0c;通俗得讲就是浏览页面在不断前进。
而且这些页面之间还是有互动性存在的&＃xff0c;两种互动行为&＃xff1a;
一. 用户前进时&＃xff0c;总是进入新的页面。(比如在合同列表页反复加载多次列表之后&＃xff0c;进入其中一个合同详情&＃xff0c;再返回时&＃xff0c;应该仍停留之前里列表页同一个位置&＃xff0c;而不是重新刷新列表页。)
二. 用户后退时&＃xff0c;需要能保留前一页数据并继续操作。(比如&＃xff0c;记到账时需要选择合同&＃xff0c;选择合同时可以新建合同&＃xff0c;新建合同时填了一堆数据可以去选择客户&＃xff0c;在选择客户时又去创建了客户&＃xff0c;那么这一堆操作下来应该能够做到&＃xff1a;创建完客户后继续新建合同&＃xff0c;建完合同后继续记该合同的到账)
![]()
上图是 demo 项目中的真实效果&＃xff0c;目前常见的 vue 开发方案里&＃xff0c;一般都会引入 vuex 或 localStorage &＃xff0c;在各个页面不断的存储和调用页面内的数据&＃xff0c;我觉得&＃xff0c;这很不科学很不优雅。
keep-alive 什么问题
vue 支持 keep-alive 组件&＃xff0c;如果启用&＃xff0c;页面内的所有数据都会被保留&＃xff0c;所以&＃xff0c;上文的互动行为二后退时保留前一页数据继续操作没有问题。
问题出在互动行为一用户前进时总是进入新页面&＃xff0c;然而一旦缓存&＃xff0c;你就没法总是进新页面了&＃xff0c;你总是进入缓存页&＃xff0c;这就很让人头疼了。
官方提供了include和exclude特性&＃xff0c;说你可以决定哪些页面使用缓存哪些页面不用缓存。链接
然而问题又回到了原点&＃xff0c;并没有解决我们酌情决定是否使用已缓存的缓存这一需求。
所以很多人想到了一个方法在离开页面时销毁这个页面是不是就可以了&＃xff0c;然而并不能&＃xff0c;这里出现了 bug &＃xff0c;组件销毁了缓存还在:
![]()
于是&＃xff0c;就有人提出希望keep-alive能增加可以动态删除已缓存组件的功能&＃xff0c;issue
这是个老话题&＃xff0c;之前一直没有进展&＃xff0c;核心原因就在于 keep-alive 不能正确处理已销毁的组件。
尝试解决这个问题
如果能实现动态使用缓存这一功能&＃xff0c;那么所有问题也就迎刃而解。
最初&＃xff0c;我研究 keep-alive 的代码&＃xff0c;发现了这么一段代码&＃xff1a;
![]()
于是&＃xff0c;我想&＃xff0c;如果在此处判断如果组件已被销毁则不使用缓存&＃xff0c;是不是就解决这个问题了&＃xff0c;于是我提交了一个 PR:
![]()
不过这个 PR 迟迟没有通过&＃xff0c;我就放弃了。
暴力解决这个问题
我继续研究有没有其他方案&＃xff0c;然后我在打印组件变量的时候&＃xff0c;发现了这么个眼熟的字段&＃xff1a;
![]()
这不就是 keep-alive 的组件嘛&＃xff0c;我赶忙点开再看&＃xff0c;发现了更眼熟的东东&＃xff1a;
![]()
于是&＃xff0c;这事儿就变得简单了&＃xff0c;直接按图索骥&＃xff0c;咱在销毁组件之前&＃xff0c;寻找路由组件所在父级的 keep-alive 组件&＃xff0c;操控其中的 cache 列表&＃xff0c;强行删除其中的缓存&＃xff0c;问题也就迎刃而解&＃xff0c;是不是很直接很暴力。
结论
keep-alive 默认不支持动态销毁已缓存的组件&＃xff0c;所以此处给出的解决方案是通过直接操控 keep-alvie 组件里的 cahce 列表&＃xff0c;暴力移除缓存&＃xff1a;
//使用Vue.mixin的方法拦截了路由离开事件&＃xff0c;并在该拦截方法中实现了销毁页面缓存的功能。
Vue.mixin({
beforeRouteLeave:function(to, from, next){
if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
{//此处判断是如果返回上一层&＃xff0c;你可以根据自己的业务更改此处的判断逻辑&＃xff0c;酌情决定是否摧毁本层缓存。
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 &＃61; this.$vnode.key &＃61;&＃61; null
? this.$vnode.componentOptions.Ctor.cid &＃43; (this.$vnode.componentOptions.tag ? &＃96;::${this.$vnode.componentOptions.tag}&＃96; : &＃39;&＃39;)
: this.$vnode.key;
var cache &＃61; this.$vnode.parent.componentInstance.cache;
var keys &＃61; this.$vnode.parent.componentInstance.keys;
if (cache[key])
{
if (keys.length) {
var index &＃61; keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
this.$destroy();
}
next();
},
});
后语
本文主要围绕如何动态删除 keep-alive 缓存这一问题进行探索&＃xff0c;其他关于如何设定页面层级、如何在前后页之间进行数据传递等问题&＃xff0c;敬请期待《Vue 全站缓存之 vue-router-then &＃xff1a;前后页数据传递》。
京公网安备 11010802041100号