From 8ae0eb09b6648bcb46322dc4c71fb060901a147d Mon Sep 17 00:00:00 2001 From: Thorsten Luenborg Date: Sat, 16 Jan 2021 11:15:19 +0100 Subject: [PATCH 1/7] docs: Document why watched template refs require the`flush: 'post'` option to be set --- src/guide/composition-api-template-refs.md | 63 ++++++++++++++++++++++ src/guide/reactivity-computed-watchers.md | 2 +- 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index f04674edc8..3339ad2e88 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -85,3 +85,66 @@ Composition API template refs do not have special handling when used inside `v-f } ``` + +## Watching Template Refs + +Watching a template ref for changes can be an alternative to the use of lifecycle hooks that was demonstrated in the previous examples. + +But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` effects are run *before* the DOM is mounted or updated so the template ref hasn't been updated when the watcher runs the effect: + +```js + + + +``` + +Therefore, watchers that use template refs should be defined with the `flush: 'post'` option. This will run the effect *after* the DOM has been updated and ensure that the template ref stays in sync with the DOM and references the correct element. + +```js + + + +``` + +* See also: [Computed and Watchers](./computed-and-watchers.md#effect-flush-timing) diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 20c75b62fc..97f48ae241 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -123,7 +123,7 @@ In this example: - The count will be logged synchronously on initial run. - When `count` is mutated, the callback will be called **before** the component has updated. -In cases where a watcher effect needs to be re-run **after** component updates, we can pass an additional `options` object with the `flush` option (default is `'pre'`): +In cases where a watcher effect needs to be re-run **after** component updates (i.e. when working with [Template Refs](./composition-api-template-refs.md#watching-template-refs)), we can pass an additional `options` object with the `flush` option (default is `'pre'`): ```js // fire after component updates so you can access the updated DOM From da4f331b01a191dc6783ee32dda7d37b3be9351d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Sun, 17 Jan 2021 09:37:10 +0100 Subject: [PATCH 2/7] Update src/guide/composition-api-template-refs.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/composition-api-template-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index 3339ad2e88..398d5f7cd2 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -107,7 +107,7 @@ But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` ef watchEffect(() => { // This effect runs before the dom is updated, // and consequently, the template ref does not hold a reference to the element yet. - console.log(root.value) // => undefined + console.log(root.value) // => null }) return { From 8314b6e40b4b0a72ef2be3ae3174a7f7714bd026 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Sun, 17 Jan 2021 09:37:21 +0100 Subject: [PATCH 3/7] Update src/guide/composition-api-template-refs.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/composition-api-template-refs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index 398d5f7cd2..07b184db68 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -105,8 +105,8 @@ But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` ef const root = ref(null) watchEffect(() => { - // This effect runs before the dom is updated, - // and consequently, the template ref does not hold a reference to the element yet. + // This effect runs before the DOM is updated, and consequently, + // the template ref does not hold a reference to the element yet. console.log(root.value) // => null }) From 98c5d09d43212daacd46bcc123035fb975912704 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Sun, 17 Jan 2021 09:37:27 +0100 Subject: [PATCH 4/7] Update src/guide/composition-api-template-refs.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/composition-api-template-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index 07b184db68..43fd2dd2a0 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -92,7 +92,7 @@ Watching a template ref for changes can be an alternative to the use of lifecycl But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` effects are run *before* the DOM is mounted or updated so the template ref hasn't been updated when the watcher runs the effect: -```js +```vue From 0b33c6f3187a50cae54e07336e8985d242548dd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Sun, 17 Jan 2021 09:37:34 +0100 Subject: [PATCH 5/7] Update src/guide/composition-api-template-refs.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/composition-api-template-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index 43fd2dd2a0..1095251aab 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -147,4 +147,4 @@ Therefore, watchers that use template refs should be defined with the `flush: 'p ``` -* See also: [Computed and Watchers](./computed-and-watchers.md#effect-flush-timing) +* See also: [Computed and Watchers](./reactivity-computed-watchers.html#effect-flush-timing) From 77e32cd40ab313875b01c94a0bb2e9a349bd4f85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Sun, 17 Jan 2021 09:37:42 +0100 Subject: [PATCH 6/7] Update src/guide/composition-api-template-refs.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/composition-api-template-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index 1095251aab..a62024502c 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -136,7 +136,7 @@ Therefore, watchers that use template refs should be defined with the `flush: 'p console.log(root.value) // =>
}, { - flush:'post' + flush: 'post' }) return { From 11e18681f051fc40120f1ec43e9dc50662f5f203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Sun, 17 Jan 2021 09:37:51 +0100 Subject: [PATCH 7/7] Update src/guide/composition-api-template-refs.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/composition-api-template-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md index a62024502c..45fe8aec12 100644 --- a/src/guide/composition-api-template-refs.md +++ b/src/guide/composition-api-template-refs.md @@ -120,7 +120,7 @@ But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` ef Therefore, watchers that use template refs should be defined with the `flush: 'post'` option. This will run the effect *after* the DOM has been updated and ensure that the template ref stays in sync with the DOM and references the correct element. -```js +```vue