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

close #11577

diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts
index 6b18318dd1dd524bbca081f1967d92ab7eceeb4d..c769ba57d8c4dc979c8d24dddd05ba4317824d72 100644 (file)
--- 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
index 85afec24ceb2f279007547f0bab324346c94bc65..67f0bc160e30dce4d7cdab90818421460580c8b1 100644 (file)
--- 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
index 2ad887a349da6ec055f332a73d2252e52c113824..479a263b39bf9cce53a7fb5d908f802fefc22097 100644 (file)
--- 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)