Javascript is required
Mokkapps Logo

Vue Tip: Lifecycle Hooks for Debugging

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Sep 26, 2022
1 min read
|
52 views
Script
Debugging
Lifecycle Hooks for Debugging Image

Vue provides two lifecycle hooks that we can use for debugging purposes: onRenderTracked and onRenderTriggered.

Warning

These hooks are development-mode-only and not called during server-side rendering.

onRenderTracked

Registers a debug hook to be called when a reactive dependency has been tracked by the component's render effect:

<script setup>import { ref, onRenderTracked } from 'vue'const count = ref(0)const count2 = ref(0)// Called twice, once for count and once for count2onRenderTracked((event) => {  console.log(event)})</script>

onRenderTriggered

Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run:

<script setup>import { ref, onRenderTriggered } from 'vue'const count = ref(0)// Called when we update countonRenderTriggered((event) => {  console.log(event)})</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.