chore: minor update

Author: edison1105

packages/runtime-core/src/component.ts

@@ -506,12 +506,16 @@ export interface ComponentInternalInstance {
    */
   asyncResolved: boolean
 
-  keepAliveEffect: Function[]
+  /**
+   * effects when the component is activated in keep-alive
+   * @internal
+   */
+  activateEffects?: Function[]
 
   // lifecycle
   isMounted: boolean
   isUnmounted: boolean
-  isActivated: boolean
+  isDeactivating?: boolean
   isDeactivated: boolean
   /**
    * @internal
@@ -672,13 +676,10 @@ export function createComponentInstance(
     asyncDep: null,
     asyncResolved: false,
 
-    keepAliveEffect: [],
-
     // lifecycle hooks
     // not using enums here because it results in computed properties
     isMounted: false,
     isUnmounted: false,
-    isActivated: false,
     isDeactivated: false,
     bc: null,
     c: null,

packages/runtime-core/src/components/KeepAlive.ts

@@ -137,7 +137,6 @@ const KeepAliveImpl: ComponentOptions = {
       optimized,
     ) => {
       const instance = vnode.component!
-      instance.isActivated = false
       move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
       // in case props have changed
       patch(
@@ -152,9 +151,11 @@ const KeepAliveImpl: ComponentOptions = {
         optimized,
       )
 
-      const effects = instance.keepAliveEffect
-      queuePostFlushCb(effects)
-      instance.keepAliveEffect.length = 0
+      const effects = instance.activateEffects
+      if (effects) {
+        queuePostFlushCb(effects)
+        instance.activateEffects!.length = 0
+      }
 
       queuePostRenderEffect(() => {
         instance.isDeactivated = false
@@ -175,12 +176,13 @@ const KeepAliveImpl: ComponentOptions = {
 
     sharedContext.deactivate = (vnode: VNode) => {
       const instance = vnode.component!
-      instance.isActivated = true
+      instance.isDeactivating = true
       invalidateMount(instance.m)
       invalidateMount(instance.a)
 
       move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
       queuePostRenderEffect(() => {
+        instance.isDeactivating = false
         if (instance.da) {
           invokeArrayFns(instance.da)
         }

packages/runtime-core/src/renderer.ts

@@ -1429,15 +1429,18 @@ function baseCreateRenderer(
         // #2458: deference mount-only object parameters to prevent memleaks
         initialVNode = container = anchor = null as any
       } else {
-        let { next, bu, u, parent, vnode } = instance
+        let { next, bu, u, parent, vnode, isDeactivating } = instance
 
-        const keepAliveParent = locateDeactiveKeepAlive(instance)
-        if (keepAliveParent) {
-          keepAliveParent.keepAliveEffect.push(() => {
-            if (!instance.isUnmounted) {
-              componentUpdateFn()
-            }
-          })
+        // skip unnecessary update while component is deactivating.
+        // the update will be stored and applied once it reactivates.
+        if (isDeactivating) {
+          ;(instance.activateEffects || (instance.activateEffects = [])).push(
+            () => {
+              if (!instance.isUnmounted) {
+                componentUpdateFn()
+              }
+            },
+          )
           return
         }
 
@@ -2552,19 +2555,6 @@ function locateNonHydratedAsyncRoot(
   }
 }
 
-function locateDeactiveKeepAlive(instance: ComponentInternalInstance | null) {
-  while (instance) {
-    if (instance.isActivated) {
-      return instance
-    }
-    if (isKeepAlive(instance.vnode)) {
-      break
-    }
-    instance = instance.parent
-  }
-  return null
-}
-
 export function invalidateMount(hooks: LifecycleHook): void {
   if (hooks) {
     for (let i = 0; i < hooks.length; i++)