回首Vue3之组件篇（三）

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

这篇文章咱们来说一下内置组件keep-alive和slot的使用方法，在使用它们的时候咱们又该注意什么呢，下面让咱们一探究竟把。

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表示排除。两者均可以用逗号分隔字符串、正则表达式或一个数组来表示。

1. 逗号分隔字符串

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
复制代码

2. 正则表达式，须要使用v-bind

<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
复制代码

3. 一个数组，须要使用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的用法，传送门过去能够详细的了解一下。

总结

1. <keep-alive>可使用include 和 exclude按需缓存。

2. slot的具名插槽和做用域插槽要合理的去使用。