feat: extend ReactiveEffect using derived class RenderEffect

Author: Alfred-Skyblue

packages/reactivity/__tests__/effect.spec.ts

@@ -990,44 +990,5 @@ describe('reactivity/effect', () => {
       expect(fnSpy).toHaveBeenCalledTimes(3)
       expect(has).toBe(false)
     })
-
-    test('pause execution of side effect functions', () => {
-      const obj = reactive({ foo: 1 })
-      const fnSpy = vi.fn(() => obj.foo)
-
-      const runner = effect(fnSpy)
-
-      expect(fnSpy).toHaveBeenCalledTimes(1)
-      obj.foo++
-      expect(fnSpy).toHaveBeenCalledTimes(2)
-
-      runner.effect.pause()
-      obj.foo++
-      expect(fnSpy).toHaveBeenCalledTimes(2)
-
-      runner.effect.resume()
-
-      obj.foo++
-      expect(fnSpy).toHaveBeenCalledTimes(3)
-    })
-
-    test('immediately execute the calls during the pause when resuming', () => {
-      const obj = reactive({ bar: 1 })
-      const fnSpy = vi.fn(() => obj.bar)
-
-      const runner = effect(fnSpy)
-
-      expect(fnSpy).toHaveBeenCalledTimes(1)
-      obj.bar++
-      expect(fnSpy).toHaveBeenCalledTimes(2)
-
-      runner.effect.pause()
-      obj.bar++
-      expect(fnSpy).toHaveBeenCalledTimes(2)
-
-      runner.effect.resume(true)
-
-      expect(fnSpy).toHaveBeenCalledTimes(3)
-    })
   })
 })

packages/reactivity/src/effect.ts

@@ -68,16 +68,6 @@ export class ReactiveEffect<T = any> {
    * @internal
    */
   private deferStop?: boolean
-  /**
-   * Whether to pause
-   * @internal
-   */
-  private isPaused = false
-  /**
-   * Indicates whether the run method was called during the pause process
-   * @internal
-   */
-  private isCalled = false
 
   onStop?: () => void
   // dev only
@@ -93,25 +83,7 @@ export class ReactiveEffect<T = any> {
     recordEffectScope(this, scope)
   }
 
-  pause() {
-    this.isPaused = true
-  }
-
-  resume(runOnResume = false) {
-    if (this.isPaused) {
-      this.isPaused = false
-      if (runOnResume && this.isCalled) {
-        this.run()
-      }
-      this.isCalled = false
-    }
-  }
-
   run() {
-    if (this.isPaused) {
-      this.isCalled = true
-      return
-    }
     if (!this.active) {
       return this.fn()
     }
@@ -154,8 +126,6 @@ export class ReactiveEffect<T = any> {
   }
 
   stop() {
-    // Reset the paused state first when stopping
-    this.resume()
     // stopped while running itself - defer the cleanup
     if (activeEffect === this) {
       this.deferStop = true

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/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'
 
 export interface Renderer<HostElement = RendererElement> {
   render: RootRenderFunction<HostElement>
@@ -1543,14 +1544,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