chore: minor tweaks

Author: edison1105

packages/runtime-core/src/component.ts

@@ -506,7 +506,11 @@ export interface ComponentInternalInstance {
    */
   asyncResolved: boolean
 
-  keepAliveEffect: Function[]
+  /**
+   * effects to be triggered on component activated in keep-alive
+   * @internal
+   */
+  activatedEffects?: Function[]
 
   // lifecycle
   isMounted: boolean
@@ -672,13 +676,11 @@ 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,
+    isActivated: true,
     isDeactivated: false,
     bc: null,
     c: null,

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

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

packages/runtime-core/src/renderer.ts

@@ -1431,11 +1431,16 @@ function baseCreateRenderer(
       } else {
         let { next, bu, u, parent, vnode } = instance
 
-        const keepAliveParent = locateDeactiveKeepAlive(instance)
-        if (keepAliveParent) {
-          keepAliveParent.keepAliveEffect.push(() => {
+        // skip updates while parent component is deactivated
+        // but store effects for next activation
+        const deactivatedParent = locateDeactivatedParent(instance)
+        if (deactivatedParent) {
+          ;(
+            deactivatedParent.activatedEffects ||
+            (deactivatedParent.activatedEffects = [])
+          ).push(() => {
             if (!instance.isUnmounted) {
-              componentUpdateFn()
+              update()
             }
           })
           return
@@ -2552,9 +2557,9 @@ function locateNonHydratedAsyncRoot(
   }
 }
 
-function locateDeactiveKeepAlive(instance: ComponentInternalInstance | null) {
+function locateDeactivatedParent(instance: ComponentInternalInstance | null) {
   while (instance) {
-    if (instance.isActivated) {
+    if (!instance.isActivated) {
       return instance
     }
     if (isKeepAlive(instance.vnode)) {