keep-alive

官方说，<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

其实，就是来做组件缓存的，这是因为我们的实际需求中会有这样的情况：当切换到已显示过的组件的时候，我们不希望这个组件重新渲染，就可以使用<keep-alive>。

如何使用

基本使用

<keep-alive>可以结合<component>使用，如下：

<keep-alive>
  <component :is="view"></component>
</keep-alive>

条件判断 <keep-alive>可以结合v-if、v-else-if和v-else使用。

<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

结合过渡或动画效果使用

<keep-alive>可以结合<transition>使用，如下：

<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

当我们需要频繁的切换组件，而且需要带有过渡或动画效果的时候，可以使用这种方式。值得我们注意的是：<keep-alive> 是用在其一个直属的子组件被切换的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

keep-alive 的 Props

include 和 exclude

include 和 exclude prop 允许组件有条件地缓存。include表示包含， exclude表示排除。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

逗号分隔字符串

<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>

exclude也是同样的用法，优先匹配组件的name，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。

max

最多缓存组件数量，如果超过这个数量，那么最久没被访问的会被销毁。使用如下：

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

slot

<slot> 元素作为组件模板之中的内容分发插槽，<slot> 元素自身将被替换。在回首Vue3之指令篇（八）这篇文章中，我们在讲v-slot的同时，也详细讲了slot的用法，传送门过去可以详细的了解一下。

总结

<keep-alive>可以使用include 和 exclude按需缓存。
slot的具名插槽和作用域插槽要合理的去使用。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之组件篇（三）

keep-alive

如何使用

keep-alive 的 Props

slot

总结