Javascript is required
·
1 min read

Vue Tip: Debug Computed Properties

Vue Tip: Debug Computed Properties Image

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 X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.