From e8ec147d68a7d0c5908ff02b2804dce87c5d8aa8 Mon Sep 17 00:00:00 2001
From: NiceHwang <niceplugin@gmail.com>
Date: Sat, 25 Jun 2022 13:38:05 +0900
Subject: [PATCH] Add: Callback Flush Timing - About the flush: sync

Add content that watchers.md : Callback Flush Timing - About the flush: sync option

Among the options used for watch, `flush: 'sync'` was not explained in the guide or API documentation, so I added it.

It need to check because my English is not good.

Hope this helps.
---
 src/guide/essentials/watchers.md | 51 ++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md
index 3983cc65e2..ffd7f8ba22 100644
--- a/src/guide/essentials/watchers.md
+++ b/src/guide/essentials/watchers.md
@@ -342,6 +342,57 @@ watchPostEffect(() => {
 
 </div>
 
+The `flush: 'pre'|'post'` option buffers the callback so that it is only called once at the end, even if there are multiple state changes in the same "tick".
+
+The `flush: 'sync'` option should be used if the callback needs to be invoked synchronously on every state change multiple times within the same tick.
+
+<div class="options-api">
+
+```js
+export default {
+  data: () => ({ count: 0 }),
+  watch: {
+    count: {
+      handler(val, preVal) {
+        console.log('Changed:', val, preVal)
+      },
+      flush: 'sync'
+    }
+  },
+  methods: {
+    increment() {
+      this.count++
+      // then trigger handler
+      this.count++
+      // then trigger handler
+      this.count++
+      // then trigger handler
+    }
+  }
+}
+```
+
+</div>
+
+<div class="composition-api">
+
+```js
+const count = ref(0)
+const callback = (val, preVal) => console.log('Changed:', val, preVal)
+const options = { flush: 'sync' }
+
+watch(count, callback, options)
+
+count.value++
+// then trigger callback
+count.value++
+// then trigger callback
+count.value++
+// then trigger callback
+```
+
+</div>
+
 <div class="options-api">
 
 ## `this.$watch()` \*