Mastering Vue 3 Lifecycle Hooks: A Complete Guide with Code Examples

Imagine you're baking a cake. 🎂 You don’t just throw all the ingredients in at once—you follow steps: preheating the oven, mixing the batter, baking, and finally decorating.

Vue components work the same way! They go through different stages—creation, updating, and destruction—and lifecycle hooks let you "hook into" these stages to run your own code at the right time.

If you’ve ever wondered:

• "How do I fetch data when a component loads?"
• "How can I clean up before a component disappears?"
• "When should I update the DOM?"

…then lifecycle hooks are your answer! Let’s break them down in a simple, beginner-friendly way.

🔍 Vue 3 Lifecycle Hooks: The Step-by-Step Journey

Every Vue component goes through a series of phases, and each has a corresponding hook. Here’s the full lifecycle flow:

1️⃣ Creation Phase (Initialization & Setup)

These hooks run when your component is first created.

setup() (New in Vue 3!)

• The first thing that runs (even before the component is created!).
• Used with the Composition API to define data, methods, and more.

onBeforeMount()

• Runs right before the component is added to the DOM.
• Use case: Last-minute changes before rendering.

onMounted()

• Runs after the component is added to the DOM.
• Use case: Fetching API data, setting up event listeners.

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log("Component is now on the page!");
    });
  }
}

2️⃣ Updating Phase (Reactivity & Changes)

These hooks run when data changes and the component re-renders.

onBeforeUpdate()

• Runs before changes are applied to the DOM.
• Use case: Checking previous state before an update.

onUpdated()

• Runs after changes are applied to the DOM.
• Use case: Performing actions after Vue updates the page.

import { ref, onUpdated } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onUpdated(() => {
      console.log("The count changed!");
    });

    return { count };
  }
}

3️⃣ Destruction Phase (Cleanup & Removal)

These hooks run when the component is removed from the page.

onBeforeUnmount()

• Runs before the component is destroyed.
• Use case: Cleaning up timers, event listeners.

onUnmounted()

• Runs after the component is destroyed.
• Use case: Final cleanup tasks.

import { onUnmounted } from 'vue';

export default {
  setup() {
    onUnmounted(() => {
      console.log("Component is gone!");
    });
  }
}

🎯 Real-Life Example: Fetching Data on Mount

A common use case is loading data when a component appears:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const posts = ref([]);

    onMounted(async () => {
      const response = await fetch('https://api.example.com/posts');
      posts.value = await response.json();
    });

    return { posts };
  }
}

Now posts will load automatically when the component mounts!

📝 Key Takeaways

✔ setup() – Where Composition API logic starts.
✔ onMounted() – Perfect for API calls & DOM interactions.
✔ onUpdated() – React to data changes after they happen.
✔ onUnmounted() – Clean up to prevent memory leaks.

💡 Frequently Asked Questions (FAQs)

Q1: What’s the difference between onMounted and onCreated?

In Vue 3, onCreated doesn’t exist—setup() replaces it! onMounted runs after the component is in the DOM.

Q2: Can I use multiple lifecycle hooks?

Yes! You can call them multiple times in setup(), and they’ll run in order.

Q3: Do lifecycle hooks work with the Options API?

Yes! Vue 3 keeps beforeCreate, created, mounted, etc., but the Composition API (onMounted, etc.) is the modern way.

Let’s Discuss!

What’s the first thing you’ll try with Vue lifecycle hooks?
Drop a comment below! 🚀

Happy coding! 👨‍💻👩‍💻