⏳ Vue Lifecycle Hooks – Understand beforeCreate, created, mounted & More (2025 Guide)

---

🧲 Introduction – What Are Vue Lifecycle Hooks?

Vue components go through a series of initialization and destruction steps known as the component lifecycle. Vue offers lifecycle hooks—special methods that run at specific points during this process. These hooks help developers manage data, fetch APIs, manipulate the DOM, and clean up resources.

🎯 In this guide, you’ll learn:

• What lifecycle hooks are and why they matter
• Each hook’s purpose and when it is called
• Practical examples using beforeCreate, created, mounted, and more
• Best practices for using hooks in Vue 3

---

📘 What Is a Lifecycle Hook?

A lifecycle hook is a function you define in a Vue component that gets automatically called by Vue during specific phases of the component’s existence—like creation, mounting, updating, or destruction.

---

🧱 Key Lifecycle Hooks Explained

🔹 1. beforeCreate()

✅ Called before the component instance is initialized.

beforeCreate() {
  console.log('Instance is being created');
}

🧠 At this point, data, computed, methods, and refs are not yet available.

---

🔹 2. created()

✅ Called after the instance is initialized and reactive properties are set up.

created() {
  console.log('Component created, data is reactive');
}

🧠 You can access data and methods, but DOM is not mounted yet.

---

🔹 3. beforeMount()

✅ Called before Vue mounts the DOM.

beforeMount() {
  console.log('Before DOM insertion');
}

🧠 DOM elements exist in memory but not yet in the actual document.

---

🔹 4. mounted()

✅ Called after the component is mounted into the DOM.

mounted() {
  console.log('Component mounted, DOM is accessible');
}

🧠 Best place to interact with the DOM or perform API calls.

---

🔹 5. beforeUpdate()

✅ Called before reactive data changes are applied to the DOM.

beforeUpdate() {
  console.log('Before DOM update');
}

🧠 Good for debugging reactive updates or preparing UI changes.

---

🔹 6. updated()

✅ Called after the DOM is updated following a reactive change.

updated() {
  console.log('DOM updated');
}

🧠 Be cautious not to create infinite loops here.

---

🔹 7. beforeUnmount() (formerly beforeDestroy in Vue 2)

✅ Called before the component is removed from the DOM.

beforeUnmount() {
  console.log('Component about to be unmounted');
}

🧠 Clean up timers, listeners, or sockets here.

---

🔹 8. unmounted() (formerly destroyed in Vue 2)

✅ Called after the component is removed from the DOM.

unmounted() {
  console.log('Component has been removed');
}

🧠 Final cleanup logic (memory, logs, etc.)

---

🧬 Lifecycle Hook Diagram

beforeCreate → created → beforeMount → mounted
       ↑                          ↓
beforeUnmount ← unmounted ← updated ← beforeUpdate

🧠 Hooks flow from creation → mounting → updating → unmounting.

---

🧰 Real-World Use Case – Mounted + Unmounted

<template>
  <div>Window Width: {{ width }}</div>
</template>

<script>
export default {
  data() {
    return { width: window.innerWidth };
  },
  mounted() {
    window.addEventListener('resize', this.updateWidth);
  },
  unmounted() {
    window.removeEventListener('resize', this.updateWidth);
  },
  methods: {
    updateWidth() {
      this.width = window.innerWidth;
    }
  }
}
</script>

🧠 Adds/removes event listeners safely.

---

⚙️ Lifecycle Hooks in Composition API

Use onMounted(), onUnmounted(), etc.

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Mounted using Composition API');
});

onUnmounted(() => {
  console.log('Unmounted using Composition API');
});
</script>

---

⚠️ Best Practices

Tip	Reason
Avoid logic in beforeCreate()	Too early – nothing is available yet
Use mounted() for DOM/API tasks	Runs after actual DOM render
Cleanup in unmounted()	Prevent memory leaks from timers/listeners
Don’t mutate DOM directly in updated()	Can cause performance or loop issues

---

📌 Summary – Recap & Next Steps

Vue lifecycle hooks allow you to hook into the flow of a component’s existence. Whether you’re fetching data, initializing plugins, or cleaning up, each hook gives you a specific place to perform your logic.

🔍 Key Takeaways:

• created() = reactive data available
• mounted() = DOM is live
• updated() = after reactive change
• unmounted() = time to clean up

⚙️ Real-World Relevance:
Lifecycle hooks power modals, fetches, animations, event listeners, third-party integration, and more.

---

❓ FAQ Section

❓ What is the difference between created() and mounted()?

✅ created() runs after setup but before the DOM is mounted. mounted() runs after the component is attached to the DOM.

---

❓ Which hook is best for fetching API data?

✅ mounted() is ideal. DOM is ready, and you can show loading states.

---

❓ Can I use lifecycle hooks with Composition API?

✅ Yes. Use onMounted(), onUnmounted(), onUpdated(), etc.

---

❓ What’s the last hook before a component is removed?

✅ beforeUnmount() is called right before removal; unmounted() runs afterward.

---

❓ Can I skip unused hooks?

✅ Yes! Vue only runs the hooks you define.

---

Share Now :