feat: add pause/resume function to ReactiveEffect

Author: Alfred-Skyblue

packages/reactivity/__tests__/effect.spec.ts

@@ -990,5 +990,44 @@ 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,6 +68,16 @@ 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
@@ -83,7 +93,23 @@ export class ReactiveEffect<T = any> {
     recordEffectScope(this, scope)
   }
 
+  pause() {
+    this.isPaused = true
+  }
+
+  resume(runOnResume = false) {
+    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()
     }
@@ -126,6 +152,8 @@ 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/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) {