Javascript is required
Mokkapps Logo

Vue Tip: Debug Computed Properties

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Jun 1, 2022
1 min read
|
59 views
Script
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:

<script setup>const count = ref(0)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 onTrackconsole.log(plusOne.value)// mutate count.value, should trigger onTriggercount.value++</script>

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more content from me. Alternatively (or additionally), you can also subscribe to my newsletter.