vue 中 keep-alive 详解

一、定义与作用

`keep-alive` 是 Vue.js 提供的一个内置组件，用于缓存动态组件。当一个组件被包裹在`keep-alive`组件内部时，在组件切换过程中，该组件的状态（如组件中的数据、DOM 状态等）会被保留，而不是像普通组件那样被销毁和重新创建。这对于提高应用性能和用户体验非常有用，特别是在频繁切换组件的场景下。

二、基本使用方式

在 Vue 模板中，可以直接将需要缓存的组件用`keep-alive`包裹起来。

<keep-alive>

  <component :is="currentComponent"></component>

</keep-alive>

三、生命周期钩子变化

当组件被`keep - alive`缓存时，它的生命周期钩子会有一些特殊的情况。

1. activated

当被缓存的组件再次被激活（显示）时，会触发`activated`钩子。这个钩子类似于`mounted`钩子，但它在组件被缓存后重新显示时调用，而不是在组件首次挂载时。

2. deactivated

当被缓存的组件被隐藏（切换到其他组件）时，会触发`deactivated`钩子。这个钩子类似于`beforeDestroy`钩子，但组件不会被销毁。在这个钩子中，可以进行一些清理工作，如暂停定时器、停止动画等，但要注意不要销毁组件本身的状态，因为组件之后可能会被重新激活。

四、缓存策略与参数

1. include

可以通过`include`属性指定哪些组件需要被缓存。它的值可以是一个组件名称的字符串或者一个组件名称数组。

<keep-alive include="ComponentA,ComponentB">

  <component :is="currentComponent"></component>

</keep-alive>

只有名称为`ComponentA`和`ComponentB`的组件会被缓存。如果`currentComponent`的值是其他组件名称，则该组件不会被缓存。

2. exclude

与`include`相反，`exclude`属性用于指定哪些组件不需要被缓存。

<keep-alive exclude="ComponentC">

  <component :is="currentComponent"></component>

</keep-alive>

除了`ComponentC`之外的组件都会被缓存。

五、应用场景

1. 多标签页应用（Tabs）

在多标签页的应用中，用户可能会频繁地在不同的标签页之间切换。使用`keep-alive`可以缓存每个标签页对应的组件，当用户切换回之前访问过的标签页时，组件能够快速显示，并且保持之前的状态，如滚动位置、表单数据等。

2. 路由组件缓存

在 Vue Router 应用中，对于一些不经常变化但切换频繁的路由组件，可以使用`keep-alive`进行缓存。

3. 模态框（Modal）组件

当模态框中的内容是一个复杂的组件时，使用`keep-alive`缓存模态框组件可以避免每次打开模态框都重新创建和渲染组件，特别是当模态框中的组件包含大量的数据或者复杂的状态时，这样可以提高性能。