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(() => { +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. + +
+ +```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 + } + } +} +``` + +
+ +
+ +```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 +``` + +
+
## `this.$watch()` \*