Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0f3b06b

Browse files
move computed/watcher debugging into advanced reactivity
1 parent 5d1ee25 commit 0f3b06b

File tree

3 files changed

+72
-56
lines changed

3 files changed

+72
-56
lines changed

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,3 +313,75 @@ A `render` function is conceptually very similar to a `computed` property. Vue d
313313
<div class="reactivecontent">
314314
<!-- <common-codepen-snippet title="Second Reactivity with Proxies in Vue 3 Explainer" slug="wvgqyJK" tab="result" theme="light" :height="500" :editable="false" :preview="false" /> -->
315315
</div>
316+
317+
## Reactivity Debugging
318+
319+
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.
320+
321+
### Component Debugging Hooks
322+
323+
// TODO `renderTracked` and `renderTriggered`
324+
325+
<div class="composition-api">
326+
327+
### Computed Debugging \*\*
328+
329+
We can debug computed properties by passing `computed()` a second options object with `onTrack` and `onTrigger` callbacks:
330+
331+
- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
332+
- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
333+
334+
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:
335+
336+
```js
337+
const plusOne = computed(() => count.value + 1, {
338+
onTrack(e) {
339+
// triggered when count.value is tracked as a dependency
340+
debugger
341+
},
342+
onTrigger(e) {
343+
// triggered when count.value is mutated
344+
debugger
345+
}
346+
})
347+
348+
// access plusOne, should trigger onTrack
349+
console.log(plusOne.value)
350+
351+
// mutate count.value, should trigger onTrigger
352+
count.value++
353+
```
354+
355+
:::tip
356+
`onTrack` and `onTrigger` computed options only work in development mode.
357+
:::
358+
359+
### Watcher Debugging \*\*
360+
361+
Similar to `computed()`, watchers also support the `onTrack` and `onTrigger` options:
362+
363+
```js
364+
watch(source, callback, {
365+
onTrack(e) {
366+
debugger
367+
},
368+
onTrigger(e) {
369+
debugger
370+
}
371+
})
372+
373+
watchEffect(callback, {
374+
onTrack(e) {
375+
debugger
376+
},
377+
onTrigger(e) {
378+
debugger
379+
}
380+
})
381+
```
382+
383+
:::tip
384+
`onTrack` and `onTrigger` watcher options only work in development mode.
385+
:::
386+
387+
</div>

‎src/guide/essentials/computed.md‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -186,38 +186,6 @@ In comparison, a method invocation will **always** run the function whenever a r
186186

187187
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.
188188

189-
<div class="composition-api">
190-
191-
## Computed Debugging \*\*
192-
193-
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:
194-
195-
- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
196-
- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
197-
198-
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:
199-
200-
```js
201-
const plusOne = computed(() => count.value + 1, {
202-
onTrack(e) {
203-
// triggered when count.value is tracked as a dependency
204-
debugger
205-
},
206-
onTrigger(e) {
207-
// triggered when count.value is mutated
208-
debugger
209-
}
210-
})
211-
212-
// access plusOne, should trigger onTrack
213-
console.log(plusOne.value)
214-
215-
// mutate count.value, should trigger onTrigger
216-
count.value++
217-
```
218-
219-
</div>
220-
221189
## Writable Computed
222190

223191
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‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -449,28 +449,4 @@ watchEffect(async (onInvalidate) => {
449449

450450
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.
451451

452-
## Watcher Debugging \*\*
453-
454-
The `onTrack` and `onTrigger` options can be used to debug a watcher's behavior.
455-
456-
- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
457-
- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
458-
459-
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:
460-
461-
```js
462-
watchEffect(
463-
() => {
464-
/* side effect */
465-
},
466-
{
467-
onTrigger(e) {
468-
debugger
469-
}
470-
}
471-
)
472-
```
473-
474-
`onTrack` and `onTrigger` only work in development mode.
475-
476452
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /