fix(watchEffect): prevent recursive calls when using flush:sync (#389)

* fix(watchEffect): prevent recursive calls when using `flush:sync`

* chore: better comment

Author: pikax

src/apis/watch.ts

@@ -230,7 +230,19 @@ function createWatcher(
 
   // effect watch
   if (cb === null) {
-    const getter = () => (source as WatchEffect)(registerCleanup)
+    let running = false
+    const getter = () => {
+      // preventing the watch callback being call in the same execution
+      if (running) {
+        return
+      }
+      try {
+        running = true
+        ;(source as WatchEffect)(registerCleanup)
+      } finally {
+        running = false
+      }
+    }
     const watcher = createVueWatcher(vm, getter, noopFn, {
       deep: options.deep || false,
       sync: isSync,

test/v3/runtime-core/apiWatch.spec.ts

@@ -514,4 +514,22 @@ describe('api: watch', () => {
   //   expect(spy).toHaveBeenCalledTimes(1);
   //   expect(warnSpy).toHaveBeenCalledWith(`"deep" option is only respected`);
   // });
+
+
+  // #388
+  it('should not call the callback multiple times', () => {
+    const data = ref([1, 1, 1, 1, 1])
+    const data2 = ref<number[]>([])
+
+    watchEffect(
+      () => {
+        data2.value = data.value.slice(1, 2)
+      },
+      {
+        flush: 'sync',
+      }
+    )
+
+    expect(data2.value).toMatchObject([1])
+  })
 })