vue中keep-alive的理解和使用

简要说明：

keep-alive：保留状态。在项目中我们经常将keep-alive和router-view结合使用，实现切换路由后仍然保留之前的路由页面的状态，路由切换回来后不会重新初始化，而是保留之前的状态。但keep-alive是vue本身提供的组件，而并非vue-router提供。它支持对普通组件和路由组件的缓存。

实现原理：

keep-alive实现原理是：
渲染一个组件时，根据组件（通过 const slot = this.$slots.default const vnode = getFirstComponentChild(slot)获取组件）的name判断是否为需要缓存组件，如果是，先判断之前是否已经缓存，如果没有缓存，将需要缓存的组件保存在一个cache对象中，包含name、tag、componentInstance(组件实例)，然后正常返回该组件，如果在cache对象中已经存在此组件，则将缓存的组件实例直接赋值给当前组件。
cache对象保存组件时，其key值取值规则如下：
在这里插入图片描述

使用：

1.接收参数：

keep-alive支持接收三个参数（都可选）：
在这里插入图片描述
include:哪些组件需要被缓存，通过与组件的名称匹配来确定组件是否需要缓存，可以传入通过逗号分割的字符串、数组、正则表达式。如果未设置此参数，则只要不在excludes中则缓存
exclude：哪些组件不要被缓存，同样通过与组件名称匹配，其优先级大于includes，如果未设置此参数而设置了includes，则不在includes中就不缓存。如果includes和excludes都未设置，则代表都要缓存。
max:最多能缓存组件的个数，如果缓存组件的个数超过max，则会删除最前面那个缓存的组件，依次类推

2.普通组件的使用：

普通组件中使用keep-alive:

//keep-alive里面所有的组件都会缓存
<keep-alive >
	<component :is="componentName"/>
</keep-alive>

//只缓存组件名称为a或b的组件
<keep-alive :include="['a','b']">
	<components :is="componentName"/>
</keep-alive>

//只缓存组件名称为b的组件
<keep-alive :include="['a','b']" :exclude="['a']">
	<components :is="componentName"/>
</keep-alive>

3.router-view使用keep-alive:

//1.所有匹配到的路由组件都会被缓存
<keep-alive>
	<router-view />
</keep-alive>

//2.通过在路由配置的meta对象中添加keepAlive属性控制对应的路由是否需要被缓存
 <keep-alive>
	 <router-view
	    v-if="$route.meta.keepAlive"
	    :key="$route.meta.routerKey || $route.fullPath"
	  />
</keep-alive>
<router-view
  v-if="!$route.meta.keepAlive"
  :key="$route.meta.routerKey || $route.fullPath"
/>

对应的路由配置：在这里插入图片描述

//组件name为“Home”的路由将被缓存，其他路由不会被缓存
<keep-alive include="Home">
	 <router-view
	    :key="$route.meta.routerKey || $route.fullPath"
	  />
</keep-alive>