Vue中的keep-alive

1、说说你对keep-alive的理解是什么？

​ keep-alive是vue中的内置组件，能在组件切换中将状态保留在内存中，防止重复渲染DOM。keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它。

只要是设置了keep-alive缓存的组件，会多出两个生命周期钩子(activated和deactivated)

一般可以在activated缓存组件之前获取数据。

​ keep-alive设置的属性

​ include 字符串或表达式，只有名称匹配的组件会被缓存

​ exclude 字符串或表达式，匹配到的组件不会被缓存

​ max 数字 最多可以缓存的组件数量

​ 使用场景

​ 当我们在某些场景下不需要让页面重新加载时可以使用keep-alive

​ 代码示例：

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