We can debug computed properties by passing computed()
a second options object with two 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 debugger events in the same format as component debug hooks:
1<script setup>
2const count = ref(0)
3
4const plusOne = computed(() => count.value + 1, {
5 onTrack(e) {
6 // Triggered when count.value is tracked as a dependency
7 debugger
8 },
9 onTrigger(e) {
10 // Triggered when count.value is mutated
11 debugger
12 },
13})
14
15// access plusOne, should trigger onTrack
16console.log(plusOne.value)
17
18// mutate count.value, should trigger onTrigger
19count.value++
20</script>
If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Use Lazy v-model to Sync State After Change Events
By default, v-model syncs with the state of the Vue instance on every input event. The .lazy modifier syncs after change events.
Vue Tip: Provide Fallback Content for Slots
There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided.