Skip to content

Commit e8ec147

Browse files
authored
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.
1 parent b1896e8 commit e8ec147

File tree

1 file changed

+51
-0
lines changed

1 file changed

+51
-0
lines changed

src/guide/essentials/watchers.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,57 @@ watchPostEffect(() => {
342342

343343
</div>
344344

345+
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".
346+
347+
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.
348+
349+
<div class="options-api">
350+
351+
```js
352+
export default {
353+
data: () => ({ count: 0 }),
354+
watch: {
355+
count: {
356+
handler(val, preVal) {
357+
console.log('Changed:', val, preVal)
358+
},
359+
flush: 'sync'
360+
}
361+
},
362+
methods: {
363+
increment() {
364+
this.count++
365+
// then trigger handler
366+
this.count++
367+
// then trigger handler
368+
this.count++
369+
// then trigger handler
370+
}
371+
}
372+
}
373+
```
374+
375+
</div>
376+
377+
<div class="composition-api">
378+
379+
```js
380+
const count = ref(0)
381+
const callback = (val, preVal) => console.log('Changed:', val, preVal)
382+
const options = { flush: 'sync' }
383+
384+
watch(count, callback, options)
385+
386+
count.value++
387+
// then trigger callback
388+
count.value++
389+
// then trigger callback
390+
count.value++
391+
// then trigger callback
392+
```
393+
394+
</div>
395+
345396
<div class="options-api">
346397

347398
## `this.$watch()` \*

0 commit comments

Comments
 (0)