juniorVue.js
Explain Vue's Life Cycle Hooks.
Updated May 4, 2026
Short answer
Lifecycle hooks are functions called at specific stages of a component's life, from creation to destruction.
Deep explanation
Hooks allow developers to run code at specific moments. Main hooks include: onMounted (DOM is ready), onUpdated (Data changed and DOM re-rendered), and onUnmounted (Clean up). In the Composition API, these are imported functions.
Real-world example
Fetching data from an API inside onMounted or clearing a setInterval in onUnmounted to prevent memory leaks.
Common mistakes
- Trying to access the DOM in `setup()` or `beforeMount` (it's not ready yet).
Follow-up questions
- What is the equivalent of destroyed in Vue 3?