From c47b44a16eb4662a40e32ce5952997585fcbb42b Mon Sep 17 00:00:00 2001 From: Johnny Charcosset Date: Tue, 8 Nov 2022 11:59:16 +0100 Subject: [PATCH 1/3] Update: watchers.md Add `Eager Watchers` section to composition side --- src/guide/essentials/watchers.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index 2258a5f459..147e19598e 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -220,9 +220,9 @@ watch( Deep watch requires traversing all nested properties in the watched object, and can be expensive when used on large data structures. Use it only when necessary and beware of the performance implications. ::: -
+## Eager Watchers {#eager-watchers} -## Eager Watchers \* {#eager-watchers} +
`watch` is lazy by default: the callback won't be called until the watched source has changed. But in some cases we may want the same callback logic to be run eagerly - for example, we may want to fetch some initial data, and then re-fetch the data whenever relevant state changes. @@ -245,6 +245,21 @@ export default { ``` The initial execution of the handler function will happen just before the `created` hook. Vue will have already processed the `data`, `computed`, and `methods` options, so those properties will be available on the first invocation. + +
+ +
+ +`watch` is lazy by default: the callback won't be called until the watched source has changed. But in some cases we may want the same callback logic to be run eagerly - for example, we may want to fetch some initial data, and then re-fetch the data whenever relevant state changes. + +We can force a watcher's callback to be executed immediately by declaring it using an object with a `handler` function and the `immediate: true` option: + +```js +watch(obj, (newValue, oldValue) => { + // logic +}, {immediate: true}) +``` +
From 3ad513a2a92c273b524c49d59d41e4c2e707a8b4 Mon Sep 17 00:00:00 2001 From: Johnny Charcosset Date: Tue, 8 Nov 2022 18:26:55 +0100 Subject: [PATCH 2/3] docs: returns consideration --- src/guide/essentials/watchers.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index 147e19598e..bd81eec105 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -222,10 +222,10 @@ Deep watch requires traversing all nested properties in the watched object, and ## Eager Watchers {#eager-watchers} -
- `watch` is lazy by default: the callback won't be called until the watched source has changed. But in some cases we may want the same callback logic to be run eagerly - for example, we may want to fetch some initial data, and then re-fetch the data whenever relevant state changes. +
+ We can force a watcher's callback to be executed immediately by declaring it using an object with a `handler` function and the `immediate: true` option: ```js @@ -249,15 +249,13 @@ The initial execution of the handler function will happen just before the `creat
- -`watch` is lazy by default: the callback won't be called until the watched source has changed. But in some cases we may want the same callback logic to be run eagerly - for example, we may want to fetch some initial data, and then re-fetch the data whenever relevant state changes. -We can force a watcher's callback to be executed immediately by declaring it using an object with a `handler` function and the `immediate: true` option: +We can force a watcher's callback to be executed immediately by passing the `immediate: true` option: ```js watch(obj, (newValue, oldValue) => { - // logic -}, {immediate: true}) + // ... +}, { immediate: true }) ```
From 74ed54726dd303b3da2d7387b9bc1b4f00538eda Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Tue, 3 Jan 2023 02:01:18 +0000 Subject: [PATCH 3/3] Reword the section on watchEffect --- src/guide/essentials/watchers.md | 33 +++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index bd81eec105..de1192d91d 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -253,7 +253,7 @@ The initial execution of the handler function will happen just before the `creat We can force a watcher's callback to be executed immediately by passing the `immediate: true` option: ```js -watch(obj, (newValue, oldValue) => { +watch(source, (newValue, oldValue) => { // ... }, { immediate: true }) ``` @@ -264,35 +264,38 @@ watch(obj, (newValue, oldValue) => { ## `watchEffect()` \*\* {#watcheffect} -`watch()` is lazy: the callback won't be called until the watched source has changed. But in some cases we may want the same callback logic to be run eagerly - for example, we may want to fetch some initial data, and then re-fetch the data whenever relevant state changes. We may find ourselves doing this: +It is common for the watcher callback to use exactly the same reactive state as the source. For example, consider the following code, which uses a watcher to load a remote resource whenever the `todoId` ref changes: ```js -const url = ref('https://...') +const todoId = ref(1) const data = ref(null) -async function fetchData() { - const response = await fetch(url.value) +watch(todoId, async () => { + const response = await fetch( + `https://jsonplaceholder.typicode.com/todos/${todoId.value}` + ) data.value = await response.json() -} - -// fetch immediately -fetchData() -// ...then watch for url change -watch(url, fetchData) +}, { immediate: true }) ``` -This can be simplified with [`watchEffect()`](/api/reactivity-core.html#watcheffect). `watchEffect()` allows us to perform a side effect immediately while automatically tracking the effect's reactive dependencies. The above example can be rewritten as: +In particular, notice how the watcher uses `todoId` twice, once as the source and then again inside the callback. + +This can be simplified with [`watchEffect()`](/api/reactivity-core.html#watcheffect). `watchEffect()` allows us to track the callback's reactive dependencies automatically. The watcher above can be rewritten as: ```js watchEffect(async () => { - const response = await fetch(url.value) + const response = await fetch( + `https://jsonplaceholder.typicode.com/todos/${todoId.value}` + ) data.value = await response.json() }) ``` -Here, the callback will run immediately. During its execution, it will also automatically track `url.value` as a dependency (similar to computed properties). Whenever `url.value` changes, the callback will be run again. +Here, the callback will run immediately, there's no need to specify `immediate: true`. During its execution, it will automatically track `todoId.value` as a dependency (similar to computed properties). Whenever `todoId.value` changes, the callback will be run again. With `watchEffect()`, we no longer need to pass `todoId` explicitly as the source value. + +You can check out [this example](/examples/#fetching-data) of `watchEffect()` and reactive data-fetching in action. -You can check out [this example](/examples/#fetching-data) with `watchEffect` and reactive data-fetching in action. +For examples like these, with only one dependency, the benefit of `watchEffect()` is relatively small. But for watchers that have multiple dependencies, using `watchEffect()` removes the burden of having to maintain the list of dependencies manually. In addition, if you need to watch several properties in a nested data structure, `watchEffect()` may prove more efficient than a deep watcher, as it will only track the properties that are used in the callback, rather than recursively tracking all of them. :::tip `watchEffect` only tracks dependencies during its **synchronous** execution. When using it with an async callback, only properties accessed before the first `await` tick will be tracked.