What are Vue lifecycle hooks and in what order do they run?
Learn Vue lifecycle hooks — created, mounted, updated, and unmounted — their order, and when to fetch data or clean up, with clear code examples.
Expected Interview Answer
Lifecycle hooks are functions Vue calls at defined stages of a component's life — creation, mounting, updating, and unmounting — letting you run code at the right moment. They run in a fixed order: setup/beforeCreate and created, then beforeMount and mounted, then beforeUpdate and updated on each reactive change, and finally beforeUnmount and unmounted.
In the Composition API you register them with functions like onMounted, onUpdated, and onUnmounted inside setup, while the Options API uses object methods (mounted, updated). Created/setup is where reactive state and data fetching begin but the DOM does not yet exist; mounted is the first hook where the real DOM is available. Update hooks fire when reactive dependencies change and re-render, and unmount hooks are where you clean up timers, listeners, and subscriptions.
- Run logic at exactly the right stage of a component
- Fetch data or set up state during creation
- Access the real DOM safely in mounted
- React to re-renders with update hooks
- Clean up timers and listeners to avoid memory leaks
AI Mentor Explanation
A match has strict phases: the toss and team selection before play, walking out to the pitch, the innings itself with each over changing the score, and the closing handshake. Lifecycle hooks are like fixed moments an analyst is allowed to speak — before the game, at the start of play, after every over, and at the final whistle — each triggered automatically in order.
Step-by-Step Explanation
Step 1
Creation stage
setup (Composition API) or beforeCreate/created runs first — reactive state is ready but no DOM exists yet; good for initial data setup.
Step 2
Before mount
beforeMount / onBeforeMount fires just before the component is inserted into the DOM.
Step 3
Mounted
mounted / onMounted runs after the DOM is created — the first safe place to access elements, refs, or start DOM-dependent work.
Step 4
Update cycle
beforeUpdate then updated (onBeforeUpdate / onUpdated) fire whenever reactive data changes and the component re-renders.
Step 5
Unmount stage
beforeUnmount then unmounted (onBeforeUnmount / onUnmounted) run when the component is removed — clean up timers, listeners, and subscriptions here.
What Interviewer Expects
- The correct order of the hooks
- Difference between created and mounted (DOM availability)
- Composition API on* functions vs Options API methods
- Where to fetch data and where to clean up
- Understanding update hooks fire on re-render
Common Mistakes
- Trying to access the DOM in created instead of mounted
- Forgetting to clean up timers or listeners in unmounted
- Confusing beforeUpdate/updated timing with mounted
- Mixing up Vue 2 names (beforeDestroy/destroyed) with Vue 3 (beforeUnmount/unmounted)
- Doing heavy synchronous work inside updated, causing render loops
Best Answer (HR Friendly)
“Vue components go through a life cycle — being created, appearing on screen, updating when data changes, and being removed — and lifecycle hooks let you run code at each of those moments. For example, you load data when the component is created and clean things up when it disappears.”
Code Example
<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'
let timer
onMounted(() => {
timer = setInterval(() => console.log('tick'), 1000)
})
onUpdated(() => {
console.log('re-rendered')
})
onUnmounted(() => {
clearInterval(timer)
})
</script>export default {
mounted() {
this.timer = setInterval(() => console.log('tick'), 1000)
},
updated() {
console.log('re-rendered')
},
beforeUnmount() {
clearInterval(this.timer)
},
}Follow-up Questions
- Why can't you access refs in the created hook?
- What replaced beforeDestroy and destroyed in Vue 3?
- Where should you make an API call and why?
- How do lifecycle hooks behave with <KeepAlive>?
- What is the equivalent of beforeCreate in <script setup>?
MCQ Practice
1. Which hook is the first place the real DOM is available?
mounted (onMounted) runs after the component is inserted into the DOM, making it the first safe place to access elements and refs.
2. In what order do these hooks run?
Creation happens first (created/setup), then mounting (mounted), then updates fire on later reactive changes.
3. Where should you clean up a setInterval timer?
Cleanup belongs in beforeUnmount/unmounted so timers and listeners are cleared when the component is removed, preventing leaks.
Flash Cards
What is a lifecycle hook? — A function Vue calls at a defined stage of a component's life — creation, mount, update, or unmount.
created vs mounted? — created has reactive state but no DOM; mounted runs after the DOM exists and can access elements.
When do update hooks run? — beforeUpdate and updated fire when reactive data changes and the component re-renders.
Where do you clean up? — In beforeUnmount / unmounted (onUnmounted) — clear timers, listeners, and subscriptions.