浅谈Vue页面级缓存解决方案feb-alive(上)

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实现的。

Vue页面级缓存解决方案feb-alive (下)

参考文档

vue-navigation
Vue.js 技术揭秘