说说你对Vue的keep-alive的理解

什么是 keep-alive

在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。

也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

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

prop:

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

keep-alive的声明周期执行

• 页面第一次进入，钩子的触发顺序
  created-> mounted-> activated，
  退出时触发 deactivated 当再次进入（前进或者后退）时，只触发 activated
• 事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；

基本用法

<!--被keepalive包含的组件会被缓存-->
<keep-alive>
    <component><component />
</keep-alive>

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

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

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

更多面试题： 前端vue面试题详细解答

参数理解

keepalive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:

• include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)

• exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)

• max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

注：当使用正则表达式或者数组时，一定要使用 v-bind

<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c"> 
  <component