vue-KeepAlive组件

默认情况下，一个组件实例在被替换掉后会被销毁，这会导致它丢失其中所有已变化的状态，当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

<KeepAlive>是vue的内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例并保留其状态，当再次访问该组件时不用再渲染dom，减少加载时间和性能消耗。

<KeepAlive>默认会缓存内部的所有组件实例，可以通过include（包括）和exclude（排除）参数条件性地缓存，需要显式声明一个name选项，它会根据组件的name选项进行匹配。

 

<KeepAlive>有最大缓存实例数参数max，如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

当一个组件实例从 DOM 上移除但因为被<KeepAlive>缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活，这是缓存实例的生命周期。被缓存的组件可以注册两个生命周期的钩子函数 onActivated() 和 onDeactivated()。

注：onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。