用法

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 keep-alive 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是activated和deactivated

包含/排除

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

它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

属性的使用方法

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"> 
    <component :is="view"></component> 
</keep-alive> 

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

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

<keep-alive :max="10"> <component :is="view"></component> </keep-alive>
复制代码

被keepalive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时 Vue 为我们解决了这个问题 被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：

• activated 当 keepalive 包含的组件再次渲染的时候触发
• deactivated 当 keepalive 包含的组件销毁的时候触发

keepalive是一个抽象的组件，缓存的组件不会被mounted为此提供activated和deactivated钩子函数