Vue中keep-alive的作用

1、keep-alive的使用场景

• 有时候我们在搜索页面不小心点了别的页面，返回的时候还想看到我们之前搜索过的数据时，这时候要用到keep-alive标签包裹组件，这时候我们的这个组件就被缓存下来了。
• 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息
• 订单列表跳转到订单详情，返回，等等场景。

官网解释： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

2、keep-alive的方法

• 利用meta标签

  {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
	  meta：{
		keepAlive：true
		//true会被保存false不会被保存
		}
    },

• 在需要缓存的router-view组件上包裹keep-alive组件

<keep-alive>
	//缓存所有的路由页面
	<router-view></router-view>
</keep-alive>

• 直接包裹要缓存的组件

<keep-alive>
	//该组件会被缓存
	<App></App>
</keep-alive>

3、keep-alive的参数

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
• activated 当keepalive包含的组件再次渲染的时候触发
• deactived 当keepalive包含的组件销毁的时候触发：keepalive可以接收三个属性作为参数进行匹配对应的组件进行缓存
• max 缓存组件的最大值：max类型为字符或者数字

代码理解：

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>


<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>


<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5">
 <component :is="currentView"/>
</keep-alive>