Vue Lifecycle Hooks

⚙️ Vue Lifecycle Hooks

Lifecycle hooks in Vue are special methods. They let you run code at specific stages of a component’s life. This includes stages from creation to removal from the DOM.

Vue lifecycle hooks are a key part of Vue.js. They are important for interviews, real projects, and improving performance.

1️⃣ What is Vue Lifecycle? ⭐

Every Vue component goes through stages:

  1. Creation

  2. Mounting

  3. Updating

  4. Unmounting (Destroying)

👉 Lifecycle hooks allow you to hook into these stages.

2️⃣ Lifecycle Hooks Order (Very Important) ⭐⭐⭐

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

📌 Interview favorite question: Explain lifecycle order

3️⃣ Creation Phase Hooks ⭐⭐

🔹 beforeCreate()

  • Component instance created

  • ❌ data, props, methods NOT available

beforeCreate() {
console.log("beforeCreate");
}

🔹 created()

  • data, props, methods available

  • ❌ DOM not available

created() {
console.log("created");
}

✅ Best place for:

  • API calls

  • Initial data setup

4️⃣ Mounting Phase Hooks ⭐⭐

🔹 beforeMount()

  • Template compiled

  • DOM not yet inserted

beforeMount() {
console.log("beforeMount");
}

🔹 mounted() ⭐⭐⭐

  • DOM fully available

  • Component rendered on screen

mounted() {
console.log("mounted");
}

✅ Best place for:

  • DOM manipulation

  • Third-party libraries (charts, sliders)

  • Timers & event listeners

5️⃣ Updating Phase Hooks ⭐⭐

🔹 beforeUpdate()

  • Data changed

  • DOM not updated yet

beforeUpdate() {
console.log("beforeUpdate");
}

🔹 updated()

  • DOM updated after data change

updated() {
console.log("updated");
}

⚠️ Avoid changing state here (can cause infinite loop)

6️⃣ Unmounting Phase Hooks ⭐⭐

🔹 beforeUnmount()

  • Component about to be destroyed

beforeUnmount() {
console.log("beforeUnmount");
}

🔹 unmounted()

  • Component removed from DOM

unmounted() {
console.log("unmounted");
}

✅ Best place for:

  • Clearing intervals

  • Removing event listeners

  • Cleanup tasks

7️⃣ Lifecycle Hooks Example ⭐⭐⭐

export default {
data() {
return { count: 0 }
},
created() {
console.log("Component Created");
},
mounted() {
console.log("Component Mounted");
},
updated() {
console.log("Component Updated");
},
unmounted() {
console.log("Component Destroyed");
}
}

8️⃣ Vue 2 vs Vue 3 Hook Names ⚠️

Vue 2 Vue 3
beforeDestroy beforeUnmount
destroyed unmounted

📌 Vue 3 uses Unmount, not Destroy

9️⃣ Lifecycle Hooks in Composition API ⭐⭐⭐

import { onMounted, onUpdated, onUnmounted } from "vue";

onMounted(() => {
console.log(“Mounted”);
});

onUpdated(() => {
console.log(“Updated”);
});

onUnmounted(() => {
console.log(“Unmounted”);
});

📌 Interview Questions (Vue Lifecycle)

Q1. Which hook is best for API calls?
👉 created()

Q2. Which hook has DOM access?
👉 mounted()

Q3. Cleanup code should go in?
👉 beforeUnmount() / unmounted()

Q4. Lifecycle hook order?
👉 Creation → Mounting → Updating → Unmounting

✅ Summary

✔ Lifecycle hooks control component behavior
✔ created() → data/API
✔ mounted() → DOM access
✔ updated() → reacts to data change
✔ unmounted() → cleanup
✔ Must-know for Vue interviews

You may also like...