expect vue3 implement sort of function like vnode.data.keepAlive for caching root instances like vue2 do.
What problem does this feature solve?
for micro-frontend app use vue 2.* ,we can use Vnode.data.keepAlive to achive caching root instances during switch tab. but vue3 was not designed with that thought;
// when micro app unmount
window.__CACHE_INSTANCE_BY_QIAN_KUN_FOR_VUE__ = cachedInstance;
const cachedNode = cachedInstance._vnode;
if (!cachedNode.data.keepAlive) cachedNode.data.keepAlive = true;
// when micro app mount
const cachedInstance = window.__CACHE_INSTANCE_BY_QIAN_KUN_FOR_VUE__;
// 从最初的Vue实例上获得_vnode
const cachedNode = cachedInstance._vnode;
instance = new Vue({
router,
store,
render: () => cachedNode,
});
What does the proposed API look like?
//renderer.ts
const patch: PatchFn = (
n1,
n2,
container,
anchor = null,
parentComponent = null,
parentSuspense = null,
isSVG = false,
slotScopeIds = null,
optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
) => {
...
const { type, ref, shapeFlag } = n2
switch (type) {
...
default:
if (shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
processComponent(
n1,
n2,
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
slotScopeIds,
optimized
)
}
}
create a new option if (shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {}
to process keptAlive vnode;