fix(apiWatch): don't invoke watch callback during resuming

Author: edison1105

packages/reactivity/src/effect.ts

@@ -49,6 +49,7 @@ export enum EffectFlags {
   DIRTY = 1 << 4,
   ALLOW_RECURSE = 1 << 5,
   PAUSED = 1 << 6,
+  RESUMING = 1 << 7,
 }
 
 /**
@@ -127,6 +128,7 @@ export class ReactiveEffect<T = any>
       this.flags &= ~EffectFlags.PAUSED
       if (pausedQueueEffects.has(this)) {
         pausedQueueEffects.delete(this)
+        this.flags |= EffectFlags.RESUMING
         this.trigger()
       }
     }

packages/reactivity/src/watch.ts

@@ -240,6 +240,14 @@ export function watch(
     if (cb) {
       // watch(source, cb)
       const newValue = effect.run()
+
+      // don't invoke cb during effect resuming
+      if (effect.flags & EffectFlags.RESUMING) {
+        oldValue = newValue
+        effect.flags &= ~EffectFlags.RESUMING
+        return
+      }
+
       if (
         deep ||
         forceTrigger ||

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -1708,24 +1708,26 @@ describe('api: watch', () => {
     resume()
     count.value++
     await nextTick()
-    expect(cb).toHaveBeenCalledTimes(2)
-    expect(cb).toHaveBeenLastCalledWith(3, 1, expect.any(Function))
+    // don't invoke callback during resuming
+    expect(cb).toHaveBeenCalledTimes(1)
+    expect(cb).toHaveBeenLastCalledWith(1, 0, expect.any(Function))
 
     count.value++
     await nextTick()
-    expect(cb).toHaveBeenCalledTimes(3)
+    expect(cb).toHaveBeenCalledTimes(2)
     expect(cb).toHaveBeenLastCalledWith(4, 3, expect.any(Function))
 
     pause()
     count.value++
     await nextTick()
-    expect(cb).toHaveBeenCalledTimes(3)
+    expect(cb).toHaveBeenCalledTimes(2)
     expect(cb).toHaveBeenLastCalledWith(4, 3, expect.any(Function))
 
     resume()
     await nextTick()
-    expect(cb).toHaveBeenCalledTimes(4)
-    expect(cb).toHaveBeenLastCalledWith(5, 4, expect.any(Function))
+    // don't invoke callback during resuming
+    expect(cb).toHaveBeenCalledTimes(2)
+    expect(cb).toHaveBeenLastCalledWith(4, 3, expect.any(Function))
   })
 
   it('shallowReactive', async () => {