vue的keep-alive

keep-alive概念

它是vue的一个内置组件，作用于组件切换时把状态保留在内存中，防止重复渲染DOM(在你的开发过程中，有一些组件没必要多次渲染)，在包裹组建动态时，它会把不活动的组件缓存下来，而不是销毁它们。

使用

可以直接当做标签，把要保存的内容放进去

keep-alive props属性

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

实际运用

需要知道组件的name，项目复杂的时候不是很好的选择

router.meta属性

缓存路由组件

使用keep-alive可以将所有路径获取(匹配)到的路由组件都缓存起来，包括路由组件的子组件，keep-alive大多数使用场景就是这种。

vue组件中

<keep-alive>
 	<router-view></router-view>
 	<!-- 缓存你所有的路由 -->
</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>
<!-- 正则表达式 (使用 `v-bind`) -->
 <keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

生命周期钩子函数

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated

• activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用
• deactivated：组件被停用(离开路由)时调用

注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。