fix(reactivity): sync watch should be executed correctly (#11589)

close #11577
vuejs · Aug 13, 2024 · 3bda3e8 · 3bda3e8
1 parent 3653bc0
commit 3bda3e8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts
@@ -45,8 +45,7 @@ export enum EffectFlags {
   NOTIFIED = 1 << 3,
   DIRTY = 1 << 4,
   ALLOW_RECURSE = 1 << 5,
-  NO_BATCH = 1 << 6,
-  PAUSED = 1 << 7,
+  PAUSED = 1 << 6,
 }
 
 /**
@@ -169,9 +168,6 @@ export class ReactiveEffect<T = any>
     ) {
       return
     }
-    if (this.flags & EffectFlags.NO_BATCH) {
-      return this.trigger()
-    }
     if (!(this.flags & EffectFlags.NOTIFIED)) {
       this.flags |= EffectFlags.NOTIFIED
       this.nextEffect = batchedEffect
@@ -267,6 +263,7 @@ export function endBatch(): void {
     return
   }
 
+  batchDepth--
   let error: unknown
   while (batchedEffect) {
     let e: ReactiveEffect | undefined = batchedEffect
@@ -286,7 +283,6 @@ export function endBatch(): void {
     }
   }
 
-  batchDepth--
   if (error) throw error
 }
 

diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts
@@ -1856,4 +1856,32 @@ describe('api: watch', () => {
 
     warn.mockRestore()
   })
+
+  it('should be executed correctly', () => {
+    const v = ref(1)
+    let foo = ''
+
+    watch(
+      v,
+      () => {
+        foo += '1'
+      },
+      {
+        flush: 'sync',
+      },
+    )
+    watch(
+      v,
+      () => {
+        foo += '2'
+      },
+      {
+        flush: 'sync',
+      },
+    )
+
+    expect(foo).toBe('')
+    v.value++
+    expect(foo).toBe('12')
+  })
 })
diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts
@@ -394,7 +394,6 @@ function doWatch(
 
   let scheduler: EffectScheduler
   if (flush === 'sync') {
-    effect.flags |= EffectFlags.NO_BATCH
     scheduler = job as any // the scheduler function gets called directly
   } else if (flush === 'post') {
     scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)