keep-alive 首先他是干什么的呢？

keepAlive 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

包含/排出

keepalive默认会缓存内部的所有组件实例，但我们可以通过 includue 和 exclude prop来定制该行为。这俩个prop的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含着倆种类型的一个数组：

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

缓存实例的生命周期

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过 activated 和 deactivated 选项来注册相应的两个状态的生命周期钩子：

export default {
  activated() {
    // 在首次挂载、
    // 以及每次从缓存中被重新插入的时候调用
  },
  deactivated() {
    // 在从 DOM 上移除、进入缓存
    // 以及组件卸载时调用
  }
}

接下来直接看源码

keepalive源码

他首先抛出了一个对象，可以理解为抛出一个组件。首先他这个name代表组件名称 abstract 代表提取和抽离的意思。如果为true代表就是提取出来的。他这个props里面接收三个参数，接收 include和 exclude 还有max这三个参数第一个 include代表包含，exclude 代表不包含，max 代表最大缓存数。

第一首先create先执行