Subscribe on changes!

expect vue3 implement sort of function like vnode.data.keepAlive for caching root instances like vue2 do.

avatar
Dec 8th 2022

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;

avatar
Mar 19th 2023

need this too