diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index e37b15e218..8866202e7f 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -83,8 +83,10 @@ We are registering the invalidation callback via a passed-in function instead of ```js const data = ref(null) -watchEffect(async (onInvalidate) => { - onInvalidate(() => { /* ... */ }) // we register cleanup function before Promise resolves +watchEffect(async onInvalidate => { + onInvalidate(() => { + /* ... */ + }) // we register cleanup function before Promise resolves data.value = await fetchData(props.id) }) ``` @@ -101,19 +103,19 @@ Vue's reactivity system buffers invalidated effects and flushes them asynchronou ``` @@ -211,6 +213,39 @@ firstName.value = 'John' // logs: ["John", ""] ["", ""] lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""] ``` +However, if you are changing both watched sources simultaneously in the same method, the watcher will be executed only once: + +```js{9-13} +setup() { + const firstName = ref('') + const lastName = ref('') + + watch([firstName, lastName], (newValues, prevValues) => { + console.log(newValues, prevValues) + }) + + const changeValues = () => { + firstName.value = 'John' + lastName.value = 'Smith' + // logs: ["John", "Smith"] ["", ""] + } + + return { changeValues } +} +``` + +Note that multiple synchronous changes will only trigger the watcher once. + +It is possible to force the watcher to trigger after every change by using the setting `flush: 'sync'`, though that isn't usually recommended. Alternatively, [nextTick](/api/global-api.html#nexttick) can be used to wait for the watcher to run before making further changes. e.g.: + +```js +const changeValues = async () => { + firstName.value = 'John' // logs: ["John", ""] ["", ""] + await nextTick() + lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""] +} +``` + ### Watching Reactive Objects Using a watcher to compare values of an array or object that are reactive requires that it has a copy made of just the values.