Vue Tip: Lifecycle Hooks for Debugging
Michael Hoffmann
Sep 26, 2022
| 1 min read
| 594 views
Michael Hoffmann
Sep 26, 2022
1 min read
| 594 views
Script
Debugging
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:
1
<script setup>
2
import { ref, onRenderTracked } from 'vue'
3
4
const count = ref(0)
5
const count2 = ref(0)
6
7
// Called twice, once for count and once for count2
8
onRenderTracked((event) => {
9
console.log(event)
10
})
11
</script>
onRenderTriggered
Registers a debug hook to be called when a reactive dependency triggers the component's render effect to be re-run:
1
<script setup>
2
import { ref, onRenderTriggered } from 'vue'
3
4
const count = ref(0)
5
6
// Called when we update count
7
onRenderTriggered((event) => {
8
console.log(event)
9
})
10
</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:
New Vue & Nuxt tips delivered to your inbox:
Vue Tip: Typing Template Refs With TypeScriptSep 3, 2022
Vue Tip: Expose Slots From a Child Component Oct 1, 2022