由于是从Bar组件切换到Foo组件，所以在patch的时候，比对到此处，并不会被判定为sameVnode，所以自然而然走到createElm，由于Foo是Vue组件，所以会进入到createComponent，所以最终进入到下面函数片段
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) { var i = vnode.data; if (isDef(i)) { var isReactivated = isDef(vnode.componentInstance) && i.keepAlive; if (isDef(i = i.hook) && isDef(i = i.init)) { i(vnode, false /* hydrating */); } // after calling the init hook, if the vnode is a child component // it should've created a child instance and mounted it. the child // component also has set the placeholder vnode's elm. // in that case we can just return the element and be done. if (isDef(vnode.componentInstance)) { initComponent(vnode, insertedVnodeQueue); insert(parentElm, vnode.elm, refElm); if (isTrue(isReactivated)) { reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm); } return true } } }
可以根据上面对于keep-alive源码的分析，此处isReactivated为true，接下去会进入到vnode生成的时候挂在的生命周期init函数
var componentVNodeHooks = { init: function init (vnode, hydrating) { if ( vnode.componentInstance && !vnode.componentInstance._isDestroyed && vnode.data.keepAlive ) { // kept-alive components, treat as a patch var mountedNode = vnode; // work around flow componentVNodeHooks.prepatch(mountedNode, mountedNode); } else { var child = vnode.componentInstance = createComponentInstanceForVnode( vnode, activeInstance ); child.$mount(hydrating ? vnode.elm : undefined, hydrating); } }, prepatch: function prepatch (oldVnode, vnode) { var options = vnode.componentOptions; var child = vnode.componentInstance = oldVnode.componentInstance; updateChildComponent( child, options.propsData, // updated props options.listeners, // updated listeners vnode, // new parent vnode options.children // new children ); }, ... }
此时由于实例已经存在，且keepAlive为true，所以会走第一个if逻辑，会执行prepatch，更新组件属性及一些监听器，如果存在插槽的话，还会更新插槽，并执行$forceUpdate，此处在前面已经分析过，不做累述。
继续createComponent，在函数内部会执行initComponent和insert
if (isDef(vnode.componentInstance)) { // 将实例上的dom赋值给vnode initComponent(vnode, insertedVnodeQueue); // 插入dom insert(parentElm, vnode.elm, refElm); if (isTrue(isReactivated)) { reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm); } return true }
至此，当组件从Bar再次切换到Foo时，实例与dom都得到了复用，达到一个很高的体验效果！而我们之后要实现的feb-alive就是基于keep-alive实现的。