Vue使用过程中 keep-alive 是个神奇的存在,可以近乎魔法的缓存页面状态,当然keep-alive也存在一些问题,不能灵活清理缓存就是本文要解决的问题。
本文将从如下几个方面展开:
1、使用场景
2、本文要解决的问题
3、粗暴的解决方式
1、使用场景
页面开发设计三个页面,分别为:指标配置(ParameterConfiguration)、坏点剔除(DataClean)、结果展示(DisplayResult),因为涉及到回退显示问题,所以使用keep-alive和动态组件的组合实现上述功能。
同时,页面提供两种场景入口,配置数据场景:包含上述三个页面,导入数据场景:包含最后两个页面.
2、本文需要解决的问题
由于场景切换时各自缓存的数据已经无意义,所以需要解决的问题是在同一场景下缓存各自页面信息,当切换场景时,清理缓存信息。
3、解决方案
- 页面基础配置
维护一份配置whiteList
,标记需要缓存的组件
whiteList: ['ParameterConfiguration', 'DataClean', 'DisplayResult']
维护一个变量currentComponent
,标记当前需显示组件,在每次切换页面时更新该变量
<keep-alive :include="whiteList">
<component :is="currentComponent"></component>
</keep-alive>
维护一变量cachedCom
,保存缓存下的页面信息
- 缓存页面vnode信息
选择在组件active状态时将组件vnode保存至变量cachedCom
activated () {
this.$parent.cachedCom.push(this.$vnode)
}
Vue为每个组件创建了唯一tag,切换组件仍使用相同tag,所以不用担心重复问题
- 清理缓存
在配置数据与导入数据场景切换时,调用清理缓存逻辑
cleanCacheCom () {
this.cachedCom.forEach(cacheVNode => {
cacheVNode.parent.componentInstance.cache = {}
cacheVNode.parent.componentInstance.keys = []
})
this.cachedCom = []
}