Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Debug Computed Properties

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

<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. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.