From c9da20dd5e81ac2e67259f2a5e9e353759070e60 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sun, 1 Aug 2021 13:56:15 +0200 Subject: [PATCH 1/6] feat: added example for watching multiple sources --- src/guide/reactivity-computed-watchers.md | 62 ++++++++++++++--------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index e37b15e218..1b94d89c42 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,27 @@ 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{8-11} +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 }; +} +``` + ### 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. @@ -241,22 +264,14 @@ const state = reactive({ watch( () => state, (state, prevState) => { - console.log( - 'not deep', - state.attributes.name, - prevState.attributes.name - ) + console.log('not deep', state.attributes.name, prevState.attributes.name) } ) watch( () => state, (state, prevState) => { - console.log( - 'deep', - state.attributes.name, - prevState.attributes.name - ) + console.log('deep', state.attributes.name, prevState.attributes.name) }, { deep: true } ) @@ -279,10 +294,7 @@ const state = reactive({ watch( () => _.cloneDeep(state), (state, prevState) => { - console.log( - state.attributes.name, - prevState.attributes.name - ) + console.log(state.attributes.name, prevState.attributes.name) } ) From 610e58b9bf84ab4156b742f4a7b04ee46cbd30e0 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sun, 1 Aug 2021 14:03:09 +0200 Subject: [PATCH 2/6] feat: added nextTick example --- src/guide/reactivity-computed-watchers.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 1b94d89c42..952663c3bd 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -215,7 +215,7 @@ 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{8-11} +```js{9-13} setup() { const firstName = ref(""); const lastName = ref(""); @@ -234,6 +234,16 @@ setup() { } ``` +If you want watcher to be triggered after every change, make sure to add the [nextTick](/api/global-api.html#nexttick) call between changes: + +```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. From 1de1a7708548a8fe1b5fc36062a8b66ee05172c7 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sun, 1 Aug 2021 14:05:47 +0200 Subject: [PATCH 3/6] fix: reverted formatting --- src/guide/reactivity-computed-watchers.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 952663c3bd..8abf16dac2 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -274,14 +274,22 @@ const state = reactive({ watch( () => state, (state, prevState) => { - console.log('not deep', state.attributes.name, prevState.attributes.name) + console.log( + 'not deep', + state.attributes.name, + prevState.attributes.name + ) } ) watch( () => state, (state, prevState) => { - console.log('deep', state.attributes.name, prevState.attributes.name) + console.log( + 'deep', + state.attributes.name, + prevState.attributes.name + ) }, { deep: true } ) @@ -304,7 +312,10 @@ const state = reactive({ watch( () => _.cloneDeep(state), (state, prevState) => { - console.log(state.attributes.name, prevState.attributes.name) + console.log( + state.attributes.name, + prevState.attributes.name + ) } ) From 4ba43d21158947d4d92b584072d9b69c441afb16 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Sun, 1 Aug 2021 21:15:43 +0300 Subject: [PATCH 4/6] Update src/guide/reactivity-computed-watchers.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Thorsten Lünborg --- src/guide/reactivity-computed-watchers.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 8abf16dac2..262b2c134c 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -234,7 +234,9 @@ setup() { } ``` -If you want watcher to be triggered after every change, make sure to add the [nextTick](/api/global-api.html#nexttick) call between changes: +Note that multiple synchronous changes will only trigger the watcher once. + +If you want the watcher to be triggered after every change, make it synchronous (`sync: true`, not recommmended), or make sure to wait a tick between each change, i.e. by using [nextTick](/api/global-api.html#nexttick): ```js const changeValues = async () => { From e8186e9491de1106fdba7fd2c4b1d9d048b75133 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Mon, 2 Aug 2021 17:42:34 +0300 Subject: [PATCH 5/6] Update src/guide/reactivity-computed-watchers.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/reactivity-computed-watchers.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 262b2c134c..16ec91aeff 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -217,20 +217,20 @@ However, if you are changing both watched sources simultaneously in the same met ```js{9-13} setup() { - const firstName = ref(""); - const lastName = ref(""); + const firstName = ref('') + const lastName = ref('') watch([firstName, lastName], (newValues, prevValues) => { - console.log(newValues, prevValues); - }); + console.log(newValues, prevValues) + }) const changeValues = () => { - firstName.value = "John"; - lastName.value = "Smith"; + firstName.value = 'John' + lastName.value = 'Smith' // logs: ["John", "Smith"] ["", ""] - }; + } - return { changeValues }; + return { changeValues } } ``` From 8be717739683430928fbcf1cb300f5191fcf67ed Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Mon, 2 Aug 2021 17:46:11 +0300 Subject: [PATCH 6/6] Update src/guide/reactivity-computed-watchers.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/reactivity-computed-watchers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 16ec91aeff..8866202e7f 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -236,7 +236,7 @@ setup() { Note that multiple synchronous changes will only trigger the watcher once. -If you want the watcher to be triggered after every change, make it synchronous (`sync: true`, not recommmended), or make sure to wait a tick between each change, i.e. by using [nextTick](/api/global-api.html#nexttick): +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 () => {