Keep-alive 详解

1、为什么要使用 keep-alive?

在各个页面之间进行跳转的时候，回到之前浏览过的页面，此时是会重新进行渲染、重新创建组件，页面也不是停留在刚才停留的位置。那么，能不能在回到浏览过的页面时，还停留在刚刚浏览的位置呢？再次进行组件的创建和渲染，也会造成一定的性能消耗。
而keep-alive就是应运而生的这么一个组件。其主要用于保留组件状态或避免重新渲染

2、keep-alive 属性

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例

3、keep-alive 的用法

传送门，去往官方对于 keep-alive 用法示例 → keep-alive

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

当组件在 <keep-alive>内被切换，它的 activated和 deactivated这两个生命周期钩子函数将会被对应执行。

我们之前曾经在一个多标签的界面中使用 isattribute 来切换不同的组件：

<component v-bind:is="currentTabComponent"></component>

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent实例。

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

注意这个 <keep-alive>要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

4、keep-alive 钩子函数

1. activated
2. deactivated

activated

官方解释:
被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

通俗解释：
在这个组件第一次被加载的时候，是不会触发。渲染之后会将当前页面进行缓存，只有离开后再次进入这个组件才会触发此钩子函数.意为 活跃组件

deactivated

官方解释:
被 keep-alive 缓存的组件停用时调用。

该钩子在服务器端渲染期间不被调用。

通俗解释 ：
在这个组件第一次被加载的时候，是不会触发。只有从当前组件离开，才会触发此钩子函数。意为 失活组件