一、什么是keep-alive?

keep-alive是vue中的内置组件，是缓存不活动的组件，而不是销毁(所以缓存组件没有销毁期)

<KeepAlive>是一个内置组件，允许我们在多个组件之间动态切换时，有条件地缓存组件实例。

在vue框架中使用keep-alive缓存组件首先要注意的一点就是：

缓存组件 里边只能是直接的盒子，盒子代表要缓存的组件，不能包裹其它盒子；

1、 简析参数：

keep-alive中需要传的参数是 max,include,exclude,

 max:<KeepAlive>其行为类似于[LRU 缓存](https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU))：

 如果缓存实例的数量即将超过指定的最大计数，则最近访问最少的缓存实例将被销毁，以便为新实例腾出空间
(组件缓存的最多个数)

include:表示值为字符串、正则表达式或字符串数组，以及匹配到的组件名称会被缓存。(可以缓存的组件)

exclude:表示值为字符串、正则表达式或字符串数组，以及匹配到的组件名称不会被缓存。(缓存 不包括、排除的组件)

2、简析生命周期

当一个组件实例从 DOM 中移除但它是由 缓存的组件树的一部分时`<KeepAlive>`，它会进入**停用**状态而不是被卸载。当组件实例作为缓存树的一部分插入 DOM 时，它会被**激活**。

一个保持活动的组件可以使用activated和钩子为这两种状态注册生命周期deactivated钩子： 注意：

• activated在 mount 和unmount 时也被调用。deactivated

• 这两个钩子不仅适用于 缓存的根组件<KeepAlive>，还适用于缓存树中的后代组件。

  

  例如：

效果：

上述案例主要实现的动能就是在点击底部tabBar路由时，主图进行内容切换。
上述案例包含技术点：动态路由以+存组件。
详情可见vue官方文档：https://vuejs.org/guide/built-ins/keep-alive.html