feat: add pause/resume methods for render function

packages/runtime-core/__tests__/components/KeepAlive.spec.ts

@@ -977,4 +977,49 @@ describe('KeepAlive', () => {
     expect(mountedB).toHaveBeenCalledTimes(1)
     expect(unmountedB).toHaveBeenCalledTimes(0)
   })
+
+  test('should resume/pause update in activated/deactivated', async () => {
+    const renderA = vi.fn(() => 'A')
+    const msg = ref('hello')
+    const A = {
+      render: () => h('div', [renderA(), msg.value])
+    }
+    const B = {
+      render: () => 'B'
+    }
+
+    const current = shallowRef(A)
+    const app = createApp({
+      setup() {
+        return () => {
+          return [h(KeepAlive, h(current.value))]
+        }
+      }
+    })
+
+    app.mount(root)
+
+    expect(serializeInner(root)).toBe(`<div>Ahello</div>`)
+    expect(renderA).toHaveBeenCalledTimes(1)
+    msg.value = 'world'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>Aworld</div>`)
+    expect(renderA).toHaveBeenCalledTimes(2)
+
+    // @ts-expect-error
+    current.value = B
+    await nextTick()
+    expect(serializeInner(root)).toBe(`B`)
+    expect(renderA).toHaveBeenCalledTimes(2)
+
+    msg.value = 'hello world'
+    await nextTick()
+    expect(serializeInner(root)).toBe(`B`)
+    expect(renderA).toHaveBeenCalledTimes(2)
+
+    current.value = A
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>Ahello world</div>`)
+    expect(renderA).toHaveBeenCalledTimes(3)
+  })
 })

packages/runtime-core/src/component.ts

@@ -8,8 +8,7 @@ import {
   EffectScope,
   markRaw,
   track,
-  TrackOpTypes,
-  ReactiveEffect
+  TrackOpTypes
 } from '@vue/reactivity'
 import {
   ComponentPublicInstance,
@@ -79,6 +78,7 @@ import {
 } from './compat/compatConfig'
 import { SchedulerJob } from './scheduler'
 import { LifecycleHooks } from './enums'
+import { RenderEffect } from './renderEffect'
 
 export type Data = Record<string, unknown>
 
@@ -240,7 +240,7 @@ export interface ComponentInternalInstance {
   /**
    * Render effect instance
    */
-  effect: ReactiveEffect
+  effect: RenderEffect
   /**
    * Bound effect runner to be passed to schedulers
    */

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

@@ -127,6 +127,8 @@ const KeepAliveImpl: ComponentOptions = {
 
     sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
       const instance = vnode.component!
+      // on activation, resume the effect of the component instance and immediately execute the call during the pause process
+      instance.effect.resume(true)
       move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
       // in case props have changed
       patch(
@@ -159,6 +161,8 @@ const KeepAliveImpl: ComponentOptions = {
 
     sharedContext.deactivate = (vnode: VNode) => {
       const instance = vnode.component!
+      // on deactivation, pause the effect of the component instance
+      instance.effect.pause()
       move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
       queuePostRenderEffect(() => {
         if (instance.da) {

packages/runtime-core/src/renderEffect.ts

@@ -0,0 +1,28 @@
+import { ReactiveEffect } from '@vue/reactivity'
+
+/**
+ * Extend `ReactiveEffect` by adding `pause` and `resume` methods for controlling the execution of the `render` function.
+ */
+export class RenderEffect extends ReactiveEffect {
+  private _isPaused = false
+  private _isCalled = false
+  pause() {
+    this._isPaused = true
+  }
+  resume(runOnce = false) {
+    if (this._isPaused) {
+      this._isPaused = false
+      if (this._isCalled && runOnce) {
+        super.run()
+      }
+      this._isCalled = false
+    }
+  }
+  update() {
+    if (this._isPaused) {
+      this._isCalled = true
+    } else {
+      return super.run()
+    }
+  }
+}

packages/runtime-core/src/renderer.ts

@@ -45,7 +45,7 @@ import {
   flushPreFlushCbs,
   SchedulerJob
 } from './scheduler'
-import { pauseTracking, resetTracking, ReactiveEffect } from '@vue/reactivity'
+import { pauseTracking, resetTracking } from '@vue/reactivity'
 import { updateProps } from './componentProps'
 import { updateSlots } from './componentSlots'
 import { pushWarningContext, popWarningContext, warn } from './warning'
@@ -72,6 +72,7 @@ import { initFeatureFlags } from './featureFlags'
 import { isAsyncWrapper } from './apiAsyncComponent'
 import { isCompatEnabled } from './compat/compatConfig'
 import { DeprecationTypes } from './compat/compatConfig'
+import { RenderEffect } from './renderEffect'
 import { TransitionHooks } from './components/BaseTransition'
 
 export interface Renderer<HostElement = RendererElement> {
@@ -1541,14 +1542,14 @@ function baseCreateRenderer(
       }
     }
 
-    // create reactive effect for rendering
-    const effect = (instance.effect = new ReactiveEffect(
+    // create render effect for rendering
+    const effect = (instance.effect = new RenderEffect(
       componentUpdateFn,
       () => queueJob(update),
       instance.scope // track it in component's effect scope
     ))
 
-    const update: SchedulerJob = (instance.update = () => effect.run())
+    const update: SchedulerJob = (instance.update = () => effect.update())
     update.id = instance.uid
     // allowRecurse
     // #1801, #2043 component render effects should allow recursive updates