第三步：根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存过该组件实例。如果存在，直接取出缓存值并更新该 key 在 this.keys 中的位置（更新key的位置是实现LRU置换策略的关键），否则执行第四步；
第四步：在 this.cache 对象中存储该组件实例并保存 key 值，之后检查缓存的实例数量是否超过 max 的设置值，超过则根据LRU置换策略删除最近最久未使用的实例（即是下标为0的那个key）。
第五步：最后并且很重要，将该组件实例的 keepAlive 属性值设置为 true 。这个在 @ 不可忽视：钩子函数 章节会再次出场。
四、重头戏：渲染
4.1 Vue的渲染过程
借一张图看下Vue渲染的整个过程：
Vue的渲染是从图中的 render 阶段开始的，但keep-alive的渲染是在patch阶段，这是构建组件树（虚拟DOM树），并将VNode转换成真正DOM节点的过程。
简单描述从 render 到 patch 的过程
我们从最简单的 new Vue 开始：
import App from './App.vue' new Vue({ render: h => h(App), }).$mount('#app')
Vue在渲染的时候先调用原型上的 _render 函数将组件对象转化为一个VNode实例；而 _render 是通过调用 createElement 和 createEmptyVNode 两个函数进行转化；
createElement 的转化过程会根据不同的情形选择 new VNode 或者调用 createComponent 函数做VNode实例化；
完成VNode实例化后，这时候Vue调用原型上的 _update 函数把VNode渲染为真实DOM，这个过程又是通过调用 __patch__ 函数完成的（这就是pacth阶段了）
用一张图表达：
4.2 keep-alive组件的渲染
我们用过keep-alive都知道，它不会生成真正的DOM节点，这是怎么做到的？
// src/core/instance/lifecycle.js export function initLifecycle (vm: Component) { const options = vm.$options // 找到第一个非abstract的父组件实例 let parent = options.parent if (parent && !options.abstract) { while (parent.$options.abstract && parent.$parent) { parent = parent.$parent } parent.$children.push(vm) } vm.$parent = parent // ... }
Vue在初始化生命周期的时候，为组件实例建立父子关系会根据 abstract 属性决定是否忽略某个组件。在keep-alive中，设置了 abstract: true ，那Vue就会跳过该组件实例。
keep-alive包裹的组件是如何使用缓存的？
在 patch 阶段，会执行 createComponent 函数：
// src/core/vdom/patch.js function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) { let i = vnode.data if (isDef(i)) { const isReactivated = isDef(vnode.componentInstance) && i.keepAlive if (isDef(i = i.hook) && isDef(i = i.init)) { i(vnode, false /* hydrating */) } if (isDef(vnode.componentInstance)) { initComponent(vnode, insertedVnodeQueue) insert(parentElm, vnode.elm, refElm) // 将缓存的DOM（vnode.elm）插入父元素中 if (isTrue(isReactivated)) { reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm) } return true } } }
在首次加载被包裹组件时，由 keep-alive.js 中的 render 函数可知， vnode.componentInstance 的值是 undefined ， keepAlive 的值是 true ，因为keep-alive组件作为父组件，它的 render 函数会先于被包裹组件执行；那么就只执行到 i(vnode, false /* hydrating */) ，后面的逻辑不再执行；
再次访问被包裹组件时， vnode.componentInstance 的值就是已经缓存的组件实例，那么会执行 insert(parentElm, vnode.elm, refElm) 逻辑，这样就直接把上一次的DOM插入到了父元素中。
五、不可忽视：钩子函数
5.1 只执行一次的钩子