Vue keep-alive 缓存清理

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 = []
    }