From f0f9ea030326c27c2af8594fffefb3977627c908 Mon Sep 17 00:00:00 2001 From: Yash <84263676+yxshee@users.noreply.github.com> Date: Sun, 25 Oct 2026 22:54:50 +0000 Subject: [PATCH] docs: fix reactivity API examples that do not match Vue 3.5 behavior - watchEffect() cleanup examples referenced an undefined `newId` variable; read `id.value` instead. - The watch() pause/resume example called `watch(() => {})`, which only logs a warning in 3.5 because a callback is required. Use `watch(source, callback)` like the other examples in the section. - The toRefs() type block declared `type ToRef` without its type parameter. - useId() with `app.config.idPrefix = 'myApp'` returns 'myApp-0', not 'myApp:0'. The separator changed after 3.5.0. - The computed debugging example said mutating `count.value` would call onTrigger, but since 3.5 a computed only tracks its dependencies while it has a subscriber. Add a watcher to the example. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_01NQDmA3mwGfL83pbg9WQ6ey --- src/api/application.md | 4 ++-- src/api/reactivity-core.md | 6 +++--- src/api/reactivity-utilities.md | 2 +- src/guide/extras/reactivity-in-depth.md | 4 ++++ 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/api/application.md b/src/api/application.md index 8374b351ee..0e411709d9 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -646,8 +646,8 @@ Configure a prefix for all IDs generated via [useId()](/api/composition-api-help ```js // in a component: - const id1 = useId() // 'myApp:0' - const id2 = useId() // 'myApp:1' + const id1 = useId() // 'myApp-0' + const id2 = useId() // 'myApp-1' ``` ## app.config.throwUnhandledErrorInProduction {#app-config-throwunhandlederrorinproduction} diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md index 61195ed0f2..6e4472abc9 100644 --- a/src/api/reactivity-core.md +++ b/src/api/reactivity-core.md @@ -306,7 +306,7 @@ Runs a function immediately while reactively tracking its dependencies and re-ru ```js watchEffect(async (onCleanup) => { - const { response, cancel } = doAsyncWork(newId) + const { response, cancel } = doAsyncWork(id.value) // `cancel` will be called if `id` changes, cancelling // the previous request if it hasn't completed yet onCleanup(cancel) @@ -320,7 +320,7 @@ Runs a function immediately while reactively tracking its dependencies and re-ru import { onWatcherCleanup } from 'vue' watchEffect(async () => { - const { response, cancel } = doAsyncWork(newId) + const { response, cancel } = doAsyncWork(id.value) // `cancel` will be called if `id` changes, cancelling // the previous request if it hasn't completed yet onWatcherCleanup(cancel) @@ -513,7 +513,7 @@ Watches one or more reactive data sources and invokes a callback function when t Pausing / resuming the watcher: ```js - const { stop, pause, resume } = watch(() => {}) + const { stop, pause, resume } = watch(source, callback) // temporarily pause the watcher pause() diff --git a/src/api/reactivity-utilities.md b/src/api/reactivity-utilities.md index 21929c7f8f..d8d0341602 100644 --- a/src/api/reactivity-utilities.md +++ b/src/api/reactivity-utilities.md @@ -184,7 +184,7 @@ Converts a reactive object to a plain object where each property of the resultin [K in keyof T]: ToRef } - type ToRef = T extends Ref ? T : Ref + type ToRef = T extends Ref ? T : Ref ``` - **Example** diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md index 69c86bf0f3..42f594b06a 100644 --- a/src/guide/extras/reactivity-in-depth.md +++ b/src/guide/extras/reactivity-in-depth.md @@ -302,6 +302,10 @@ const plusOne = computed(() => count.value + 1, { // access plusOne, should trigger onTrack console.log(plusOne.value) +// onTrigger is only called while plusOne has a subscriber, +// such as a watcher or a component that renders it +watchEffect(() => plusOne.value) + // mutate count.value, should trigger onTrigger count.value++ ```