Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Lifecycle Hooks for Debugging

Vue Tip: Lifecycle Hooks for Debugging Image
ScriptDebugging

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 count2 onRenderTracked((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 count onRenderTriggered((event) => { console.log(event) }) </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.

Vue Tip: Typing Template Refs With TypeScript

Template refs only exist after the component is mounted. Thus, it’s necessary to type template refs with a union type that includes the DOM element type as well as null.

Vue Tip: Expose Slots From a Child Component

Third-party components are often wrapped in a custom component. But in that way, the slots of the third-party component get lost.