Lifecycle hooks in Vue are special methods that run at specific stages of a component’s lifecycle — from creation to destruction. They allow developers to perform logic like fetching data, manipulating the DOM, or cleaning up resources. Framework focus: Vue SFC patterns, ref/reactive state, computed/watch, and v-model bindings.
What are lifecycle hooks in Vue and when are they used?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Every Vue component goes through a series of lifecycle stages — creation, mounting, updating, and unmounting. Vue provides lifecycle hooks, which are special functions you can define to run code automatically at these stages.
JAVASCRIPT
export default {
data() {
return {
message: 'Hello Vue!'
};
},
created() {
console.log('Component is created!');
},
mounted() {
console.log('Component is mounted to the DOM!');
},
updated() {
console.log('Component has re-rendered!');
},
unmounted() {
console.log('Component has been removed from the DOM!');
}
};
Each hook corresponds to a specific stage of the component lifecycle. For example, created() runs when the component is initialized, while mounted() runs when the component is added to the DOM.
Commonly Used Lifecycle Hooks
Hook | When It Runs | Typical Use Case |
|---|---|---|
beforeCreate | Before data observation and events are set up | Rarely used; low-level hook for advanced debugging |
created | After instance is created and reactive data is available | Initialize data or fetch initial data |
beforeMount | Before component is mounted to the DOM | Prepare final changes before mounting |
mounted | After the component is mounted to the DOM | Access the DOM or third-party libraries |
beforeUpdate | Before reactive data causes re-rendering | Perform checks before DOM updates |
updated | After DOM updates due to reactive data changes | React to DOM changes or perform animations |
beforeUnmount | Before the component is destroyed | Cleanup operations or cancel timers |
unmounted | After the component is destroyed and removed from DOM | Release resources, event listeners, or observers |
Lifecycle Hook Flow
1️⃣ beforeCreate → 2️⃣ created → 3️⃣ beforeMount → 4️⃣ mounted
Then for updates: 5️⃣ beforeUpdate → 6️⃣ updated<br>And finally for teardown: 7️⃣ beforeUnmount → 8️⃣ unmounted.
Use Case Example
Fetching data when a component mounts is one of the most common lifecycle hook patterns:
JAVASCRIPT
export default {
data() {
return { users: [] };
},
async mounted() {
const res = await fetch('https://api.example.com/users');
this.users = await res.json();
}
};
In this example, the mounted() hook ensures the component is attached to the DOM before fetching and displaying data.
Think of lifecycle hooks as checkpoints — moments in a component’s journey where you can pause, inspect, or intervene to perform logic, cleanup, or side effects.
Summary
Summary
- Lifecycle hooks run at specific stages of a component’s creation, update, and destruction.
- Commonly used hooks include
created(),mounted(), andupdated(). - They’re essential for handling initialization, DOM access, and cleanup logic.
Similar questions
Guides