MeKeepAlive
vue 官方的KeepAlive缓存只支持按组件名筛选过滤，这里自定义了MeKeepAlive组件,在KeepAlive的前提下增加了组件key过滤条件,其余规范和功能和KeepAlive组件一致，KeepAlive官方说明KeepAlive
组件props
| props | 类型 | 说明 |
|---|---|---|
| max | number | 限制最大缓存实例数 |
| include | 以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组 | 过滤组件名白名单 |
| exclude | 以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组 | 过滤组件名黑名单 |
| includeKey | 以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组 | 过滤组件key白名单 |
| excludeKey | 以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组 | 过滤组件key黑名单 |
使用演示
这里只样式includeKey、excludeKey其余说明参考KeepAlive
vue
<me-keep-alive includeKey="a,b">
<component :is="view" key="a" />
<component :is="view" key="b" />
<component :is="view" key="c" />
</me-keep-alive>
vue
<me-keep-alive excludeKey="c">
<component :is="view" key="a" />
<component :is="view" key="b" />
<component :is="view" key="c" />
</me-keep-alive>局限性
因为vue编译模板时对KeepAlive tagName做了特殊处理,当MeKeepAlive和Transition组件、TransitionGroup配合使用使用时，只能用渲染函数的方式使用，在Vue 的单文件组件 (即 *.vue 文件)中请使用KeepAlive组件。
Transition+渲染函数使用示例
import { Transition } from 'vue';
const transitionProps={};
const meKeepAliveProps={};
h(Transition, transitionProps, {
default: () => h(MeKeepAlive, meKeepAliveProps, [componentOptions])
})