如官网所说，<KeepAlive>首先是一个内置组件，主要功能是缓存组件实例，那么我们就可以围绕缓存组件实例这个主题来展开深入探究。
首先，我们要知道不同的组件在切换的时候会经历创建和销毁阶段，这意味着组件里面的状态也会随着这一过程发生改变，同一个组件在销毁后重新创建，组件里面的状态也会重新初始化。<KeepAlive>的出现就是为了解决这个问题，将组件在切换前的状态存储起来，在复用的时候不必重新初始化，直接回到切换前的状态，这样既减少了重新渲染的性能损失，也提升了用户体验，类似 IOS 中应用墓碑机制，把我们的组件放在后台。
在 Vue 当中 Virtual DOM 变成 Real DOM 视图每一次更新过程：需要更新的内容形成vNode，对比old的vNode，找出差异，通过diff形成一个补丁，这个补丁就是生成真实DOM的描述，然后更新真实DOM。在没有缓存的时候就会重新组装vNode，然后更新DOM；在有缓存的时候就会对比现有的vNode，如果有更新那么就重复一次更新过程。
<KeepAlive> 就是特指有缓存这一阶段，缓存的是组件的实例，也就是上述所说的vNode。也就是说 <KeepAlive> 组件缓存的组件实例不需要重新组装vNode，只需要更新真实DOM。
对于<KeepAlive>，我们先来看看Vue官网是怎么说的：<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
被这个组件包裹的组件只有首次进入会调用 mounted() 生命周期钩子，当我们切换组件再次回到这个组件的时候，只会调用 activated() 这个 <KeepAlive> 独有的生命周期钩子，离开组件的时候调用 deactivated() 生命周期钩子，而不是普通组件的 unmounted。
<KeepAlive> 是怎么使用的，请看下列代码：
<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
在动态组件切换的时候，他们的组件实例都被记录在<KeepAlive>组件中
