move computed/watcher debugging into advanced reactivity

Author: yyx990803

src/guide/advanced/reactivity-in-depth.md

@@ -313,3 +313,75 @@ A `render` function is conceptually very similar to a `computed` property. Vue d
 <div class="reactivecontent">
   <!-- <common-codepen-snippet title="Second Reactivity with Proxies in Vue 3 Explainer" slug="wvgqyJK" tab="result" theme="light" :height="500" :editable="false" :preview="false" /> -->
 </div>
+
+## Reactivity Debugging
+
+It's great that Vue's reactivity system automatically tracks dependencies, but in some cases we may want to figure out exactly what is being tracked, or what is causing a component to re-render.
+
+### Component Debugging Hooks
+
+// TODO `renderTracked` and `renderTriggered`
+
+<div class="composition-api">
+
+### Computed Debugging \*\*
+
+We can debug computed properties by passing `computed()` a second options object with `onTrack` and `onTrigger` callbacks:
+
+- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
+- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
+
+Both callbacks will receive a debugger event which contains information on the dependency in question. It is recommended to place a `debugger` statement in these callbacks to interactively inspect the dependency:
+
+```js
+const plusOne = computed(() => count.value + 1, {
+  onTrack(e) {
+    // triggered when count.value is tracked as a dependency
+    debugger
+  },
+  onTrigger(e) {
+    // triggered when count.value is mutated
+    debugger
+  }
+})
+
+// access plusOne, should trigger onTrack
+console.log(plusOne.value)
+
+// mutate count.value, should trigger onTrigger
+count.value++
+```
+
+:::tip
+`onTrack` and `onTrigger` computed options only work in development mode.
+:::
+
+### Watcher Debugging \*\*
+
+Similar to `computed()`, watchers also support the `onTrack` and `onTrigger` options:
+
+```js
+watch(source, callback, {
+  onTrack(e) {
+    debugger
+  },
+  onTrigger(e) {
+    debugger
+  }
+})
+
+watchEffect(callback, {
+  onTrack(e) {
+    debugger
+  },
+  onTrigger(e) {
+    debugger
+  }
+})
+```
+
+:::tip
+`onTrack` and `onTrigger` watcher options only work in development mode.
+:::
+
+</div>

src/guide/essentials/computed.md

@@ -186,38 +186,6 @@ In comparison, a method invocation will **always** run the function whenever a r
 
 Why do we need caching? Imagine we have an expensive computed property `list`, which requires looping through a huge array and doing a lot of computations. Then we may have other computed properties that in turn depend on `list`. Without caching, we would be executing `list`’s getter many more times than necessary! In cases where you do not want caching, use a method call instead.
 
-<div class="composition-api">
-
-## Computed Debugging \*\*
-
-It's great that a computed property automatically tracks its reactive dependencies, but in some cases we may want to figure out exactly what is being tracked, or what is causing it to re-compute. We can do that by passing `computed()` a second options object with `onTrack` and `onTrigger` callbacks:
-
-- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
-- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
-
-Both callbacks will receive a debugger event which contains information on the dependency in question. It is recommended to place a `debugger` statement in these callbacks to interactively inspect the dependency:
-
-```js
-const plusOne = computed(() => count.value + 1, {
-  onTrack(e) {
-    // triggered when count.value is tracked as a dependency
-    debugger
-  },
-  onTrigger(e) {
-    // triggered when count.value is mutated
-    debugger
-  }
-})
-
-// access plusOne, should trigger onTrack
-console.log(plusOne.value)
-
-// mutate count.value, should trigger onTrigger
-count.value++
-```
-
-</div>
-
 ## Writable Computed
 
 Computed properties are by default getter-only. If you attempt to assign a new value to a computed property, you will receive a runtime warning. In the rare cases where you need a "writable" computed property, you can create one by providing both a getter and a setter:

src/guide/essentials/watchers.md

@@ -449,28 +449,4 @@ watchEffect(async (onInvalidate) => {
 
 An async function implicitly returns a Promise, but the cleanup function needs to be registered immediately before the Promise resolves. In addition, Vue relies on the returned Promise to automatically handle potential errors in the Promise chain.
 
-## Watcher Debugging \*\*
-
-The `onTrack` and `onTrigger` options can be used to debug a watcher's behavior.
-
-- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
-- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
-
-Both callbacks will receive a debugger event which contains information on the dependency in question. It is recommended to place a `debugger` statement in these callbacks to interactively inspect the dependency:
-
-```js
-watchEffect(
-  () => {
-    /* side effect */
-  },
-  {
-    onTrigger(e) {
-      debugger
-    }
-  }
-)
-```
-
-`onTrack` and `onTrigger` only work in development mode.
-
 </div>