Vue.js Lifecycle Hooks - Complete Explanation 🚀

In Vue.js, lifecycle hooks are special methods that let you execute code at different stages of a Vue instance’s life. Here’s an overview of all major lifecycle hooks:

1️⃣ Creation Phase (Instance is Created)

1. `beforeCreate()`

Called before Vue initializes data(), computed, or methods.
You cannot access this.data or this.methods yet.
Use Case: Logging or setting up non-reactive properties.

beforeCreate() {
    console.log("Before Create: ", this.message);  // Undefined
}

2. `created()`

Called after Vue initializes data(), computed, and methods.
this.message is now accessible.
Use Case: Fetching data from APIs, initializing variables.

created() {
    console.log("Created: ", this.message);  // Now accessible
}

2️⃣ Mounting Phase (DOM is Rendered)

3. `beforeMount()`

Called before Vue inserts the component into the DOM.
The template is compiled, but nothing is visible on the screen yet.
Use Case: Modifying the template before rendering.

beforeMount() {
    console.log("Before Mount: ", this.message);
}

4. `mounted()` (Most Used)

Called after Vue inserts the component into the DOM.
Use Case:
- Fetching data from APIs.
- Running animations.
- Setting up event listeners.

mounted() {
    console.log("Mounted: ", this.message);
}

✅ Example: Fetching data in mounted()

mounted() {
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
            this.message = data.value;
        });
}

3️⃣ Updating Phase (Reactivity in Action)

5. `beforeUpdate()`

Called before the DOM is updated when data changes.
Use Case: Perform an action before re-rendering.

beforeUpdate() {
    console.log("Before Update: ", this.message);
}

6. `updated()`

Called after Vue updates the DOM.
Use Case:
- Run a function after reactivity changes the DOM.
- Fetch new data based on user input.

updated() {
    console.log("Updated: ", this.message);
}

4️⃣ Destruction Phase (Instance is Destroyed)

7. `beforeDestroy()`

Called before Vue destroys the component.
Use Case:
- Clean up timers.
- Remove event listeners.

beforeDestroy() {
    console.log("Before Destroy: Cleaning up...");
}

8. `destroyed()`

Called after Vue removes the component from the DOM.
Use Case: Debugging after destruction.

destroyed() {
    console.log("Component Destroyed.");
}

🎯 Vue.js Lifecycle Hook Order (Execution Sequence)

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()  (Only if data changes)
updated()       (Only if data changes)
beforeDestroy()
destroyed()

📌 Full Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Lifecycle Hooks</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: "Hello Vue.js"
            };
        },
        beforeCreate() {
            console.log("1. Before Create: ", this.message);  // undefined
        },
        created() {
            console.log("2. Created: ", this.message);  // "Hello Vue.js"
        },
        beforeMount() {
            console.log("3. Before Mount: ", this.message);
        },
        mounted() {
            console.log("4. Mounted: ", this.message);
        },
        beforeUpdate() {
            console.log("5. Before Update: ", this.message);
        },
        updated() {
            console.log("6. Updated: ", this.message);
        },
        beforeDestroy() {
            console.log("7. Before Destroy: Cleaning up...");
        },
        destroyed() {
            console.log("8. Destroyed: Component removed.");
        },
        methods: {
            changeMessage() {
                this.message = this.message === "Hello Vue.js" ? "Vue Lifecycle" : "Hello Vue.js";
            }
        }
    });
</script>

</body>
</html>

🎯 Key Takeaways

beforeCreate() → created(): Vue initializes data & methods.
beforeMount() → mounted(): Vue inserts the template into the DOM.
beforeUpdate() → updated(): Vue updates the DOM when data changes.
beforeDestroy() → destroyed(): Vue removes the component from the DOM.

🎯 Vue.js Lifecycle Hooks - Deep Explanation with Real-World Example & Diagrams

Vue.js lifecycle hooks allow you to execute code at different stages of a component’s life. Let's go step by step, using real-world examples and a diagram to visualize everything.

📌 1. Lifecycle Diagram (Execution Flow)

Here’s how Vue lifecycle hooks execute in order:

Creation Phase:
1. beforeCreate()   →  Data & methods not available yet
2. created()        →  Data & methods initialized

Mounting Phase:
3. beforeMount()    →  Virtual DOM compiled
4. mounted()        →  DOM elements inserted

Updating Phase:
5. beforeUpdate()   →  Called before data changes in the DOM
6. updated()        →  Called after DOM updates

Destroy Phase:
7. beforeDestroy()  →  Cleanup before removal
8. destroyed()      →  Component completely removed

🔹 Lifecycle Diagram

This diagram shows how lifecycle hooks interact with the component:

               Vue Instance
                 ⬇
    +-------------------------+
    |  beforeCreate()         |  🔹 Data & methods not available
    +-------------------------+
                 ⬇
    +-------------------------+
    |  created()              |  🔹 Data & methods available
    +-------------------------+
                 ⬇
    +-------------------------+
    |  beforeMount()          |  🔹 Template compiled
    +-------------------------+
                 ⬇
    +-------------------------+
    |  mounted()              |  🔹 DOM is ready
    +-------------------------+
                 ⬇
    +-------------------------+
    |  beforeUpdate()         |  🔹 Called before re-render
    +-------------------------+
                 ⬇
    +-------------------------+
    |  updated()              |  🔹 DOM updated
    +-------------------------+
                 ⬇
    +-------------------------+
    |  beforeDestroy()        |  🔹 Cleanup before removal
    +-------------------------+
                 ⬇
    +-------------------------+
    |  destroyed()            |  🔹 Component removed
    +-------------------------+

📌 2. Real-World Example

Imagine you’re building an e-commerce product page. You need to:
✔ Fetch product details from an API when the page loads.
✔ Show a loading spinner before the data loads.
✔ Listen for cart updates when the user adds/removes products.
✔ Remove event listeners when leaving the page.

Here’s how we apply lifecycle hooks:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Lifecycle Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>{{ product.name }}</h1>
    <p>{{ product.description }}</p>
    <p><strong>Price:</strong> ${{ product.price }}</p>
    <button @click="addToCart">Add to Cart</button>
    <p v-if="loading">Loading product...</p>
</div>

<script>
new Vue({
    el: "#app",
    data() {
        return {
            product: {},
            loading: true
        };
    },
    beforeCreate() {
        console.log("1️⃣ beforeCreate: Data not initialized");
    },
    created() {
        console.log("2️⃣ created: Fetching product...");
        setTimeout(() => {
            this.product = {
                name: "Smartphone",
                description: "A high-end smartphone with an amazing camera.",
                price: 999
            };
            this.loading = false;
            console.log("✅ Product fetched");
        }, 2000);
    },
    beforeMount() {
        console.log("3️⃣ beforeMount: Template is compiled but not inserted into DOM.");
    },
    mounted() {
        console.log("4️⃣ mounted: Component is now in the DOM.");
        window.addEventListener("resize", this.handleResize);
    },
    beforeUpdate() {
        console.log("5️⃣ beforeUpdate: Data is changing...");
    },
    updated() {
        console.log("6️⃣ updated: DOM updated with new data.");
    },
    beforeDestroy() {
        console.log("7️⃣ beforeDestroy: Cleaning up event listeners...");
        window.removeEventListener("resize", this.handleResize);
    },
    destroyed() {
        console.log("8️⃣ destroyed: Component removed.");
    },
    methods: {
        addToCart() {
            console.log("📦 Product added to cart!");
        },
        handleResize() {
            console.log("📏 Window resized!");
        }
    }
});
</script>

</body>
</html>

📌 3. Understanding Execution with Logs

When you open the browser console, this is what you’ll see:

1️⃣ beforeCreate: Data not initialized
2️⃣ created: Fetching product...
3️⃣ beforeMount: Template is compiled but not inserted into DOM.
4️⃣ mounted: Component is now in the DOM.
✅ Product fetched

When you add a product to the cart, the message appears:

📦 Product added to cart!

When you close the page, Vue cleans up event listeners:

7️⃣ beforeDestroy: Cleaning up event listeners...
8️⃣ destroyed: Component removed.

📌 4. Summary of Lifecycle Hooks

Hook	When it Runs	Common Use Case
`beforeCreate()`	Before Vue initializes data	Logging, non-reactive setup
`created()`	After Vue initializes data	Fetch API, set up variables
`beforeMount()`	Before inserting component in DOM	Modify template before rendering
`mounted()`	After inserting component in DOM	Fetch API, event listeners
`beforeUpdate()`	Before Vue updates the DOM	Debugging before changes
`updated()`	After Vue updates the DOM	Work after reactivity updates
`beforeDestroy()`	Before Vue removes component	Cleanup timers, event listeners
`destroyed()`	After Vue removes component	Final cleanup, debugging

📌 5. When to Use Lifecycle Hooks

Scenario	Best Lifecycle Hook
Fetch data from API	`created()` or `mounted()`
Modify DOM directly	`mounted()`
Listen for user events	`mounted()`
Cleanup event listeners	`beforeDestroy()`
Debug changes before update	`beforeUpdate()`
Debug after reactivity change	`updated()`

💡 Conclusion

Lifecycle hooks control different stages of a Vue component.
created() is great for fetching data.
mounted() is perfect for event listeners & DOM updates.
beforeDestroy() helps clean up unnecessary processes.
Vue’s reactivity system updates the DOM efficiently.

Awesome! Let’s reinforce your understanding with a quick quiz and then dive into a real-world Vue app example using lifecycle hooks. 🚀

🎯 Quick Vue Lifecycle Quiz

Test yourself with these 5 multiple-choice questions!

Q1: Which lifecycle hook is best for fetching data from an API?

A) beforeCreate
B) created
C) mounted
D) beforeDestroy

👉 Answer: created (B) ✅
(Data is available, but the DOM isn’t yet mounted. API calls here ensure smooth rendering!)

Q2: Which hook runs when the component is fully inserted into the DOM?

A) created
B) mounted
C) beforeUpdate
D) destroyed

👉 Answer: mounted (B) ✅
(This is the best place to set up event listeners, access the DOM, or integrate with third-party libraries!)

Q3: When should you remove event listeners like `window.addEventListener()`?

A) beforeCreate
B) updated
C) beforeDestroy
D) mounted

👉 Answer: beforeDestroy (C) ✅
(Ensures clean memory usage & prevents errors when switching components!)

Q4: What does `beforeUpdate` do?

A) Runs before data changes in Vue
B) Runs after DOM updates
C) Runs when the component is removed
D) Runs before the component is created

👉 Answer: beforeUpdate (A) ✅
(Great for debugging before Vue updates the DOM!)

Q5: If a Vue component is removed from the page, which hook runs last?

A) beforeDestroy
B) destroyed
C) beforeCreate
D) beforeMount

👉 Answer: destroyed (B) ✅
(At this point, Vue has removed everything! You can perform any final cleanup here.)

🔥 Real-World Example: Vue Todo App with Lifecycle Hooks

Let’s build a Vue Todo App that: ✔ Fetches initial tasks from local storage.
✔ Auto-saves tasks when updated.
✔ Cleans up event listeners before closing.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Todo App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>Todo List</h1>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a task">
    <button @click="addTask">Add</button>
    
    <ul>
        <li v-for="(task, index) in tasks" :key="index">
            {{ task }}
            <button @click="removeTask(index)">❌</button>
        </li>
    </ul>
</div>

<script>
new Vue({
    el: "#app",
    data() {
        return {
            newTask: "",
            tasks: []
        };
    },
    beforeCreate() {
        console.log("1️⃣ beforeCreate: No tasks yet.");
    },
    created() {
        console.log("2️⃣ created: Loading tasks...");
        const savedTasks = localStorage.getItem("tasks");
        if (savedTasks) {
            this.tasks = JSON.parse(savedTasks);
        }
    },
    mounted() {
        console.log("3️⃣ mounted: Todo app is ready.");
        window.addEventListener("beforeunload", this.saveTasks);
    },
    beforeUpdate() {
        console.log("4️⃣ beforeUpdate: Task list is changing...");
    },
    updated() {
        console.log("5️⃣ updated: Task list updated!");
    },
    beforeDestroy() {
        console.log("6️⃣ beforeDestroy: Cleaning up...");
        window.removeEventListener("beforeunload", this.saveTasks);
    },
    destroyed() {
        console.log("7️⃣ destroyed: App removed.");
    },
    methods: {
        addTask() {
            if (this.newTask.trim()) {
                this.tasks.push(this.newTask.trim());
                this.newTask = "";
            }
        },
        removeTask(index) {
            this.tasks.splice(index, 1);
        },
        saveTasks() {
            localStorage.setItem("tasks", JSON.stringify(this.tasks));
            console.log("📝 Tasks saved to local storage.");
        }
    }
});
</script>

</body>
</html>

📌 Key Takeaways from This Todo App

1️⃣ Data Persistence – Saves tasks using localStorage.
2️⃣ Auto-Saving – Calls saveTasks() before closing the page.
3️⃣ Memory Cleanup – Removes event listeners in beforeDestroy().

Sure! A Student Planner App is a useful alternative to a Todo App. It helps students manage assignments, deadlines, class schedules, and reminders.

🔥 Let’s update our previous example with a Vue.js Student Planner App!

🎯 Vue Student Planner App

✅ Features:

✔ Add assignments with deadlines.
✔ Sort assignments by due date.
✔ Persist data using localStorage.
✔ Show upcoming deadlines in red.
✔ Remove completed assignments.

📌 Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Student Planner</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
        .deadline-soon { color: red; font-weight: bold; }
    </style>
</head>
<body>

<div id="app">
    <h1>📚 Student Planner</h1>

    <input v-model="newTask" placeholder="Enter assignment" @keyup.enter="addTask">
    <input type="date" v-model="newDeadline">
    <button @click="addTask">Add</button>

    <ul>
        <li v-for="(task, index) in sortedTasks" :key="index">
            {{ task.name }} - 
            <span :class="{ 'deadline-soon': isDeadlineSoon(task.deadline) }">
                Due: {{ task.deadline }}
            </span>
            <button @click="removeTask(index)">❌</button>
        </li>
    </ul>
</div>

<script>
new Vue({
    el: "#app",
    data() {
        return {
            newTask: "",
            newDeadline: "",
            tasks: []
        };
    },
    beforeCreate() {
        console.log("1️⃣ beforeCreate: No assignments loaded yet.");
    },
    created() {
        console.log("2️⃣ created: Loading assignments...");
        const savedTasks = localStorage.getItem("tasks");
        if (savedTasks) {
            this.tasks = JSON.parse(savedTasks);
        }
    },
    mounted() {
        console.log("3️⃣ mounted: Planner is ready.");
        window.addEventListener("beforeunload", this.saveTasks);
    },
    beforeDestroy() {
        console.log("6️⃣ beforeDestroy: Cleaning up...");
        window.removeEventListener("beforeunload", this.saveTasks);
    },
    methods: {
        addTask() {
            if (this.newTask.trim() && this.newDeadline) {
                this.tasks.push({ name: this.newTask.trim(), deadline: this.newDeadline });
                this.newTask = "";
                this.newDeadline = "";
            }
        },
        removeTask(index) {
            this.tasks.splice(index, 1);
        },
        saveTasks() {
            localStorage.setItem("tasks", JSON.stringify(this.tasks));
            console.log("📝 Assignments saved.");
        },
        isDeadlineSoon(deadline) {
            const today = new Date();
            const dueDate = new Date(deadline);
            const diffTime = dueDate - today;
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            return diffDays <= 2; // Highlight tasks due in 2 days
        }
    },
    computed: {
        sortedTasks() {
            return this.tasks.sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
        }
    }
});
</script>

</body>
</html>

🔥 Key Features of This App

📅 Assignments – Add assignments with due dates.
⚠ Deadline Alerts – Upcoming deadlines (within 2 days) turn red.
📊 Sorting – Tasks auto-sort by due date.
💾 Persistence – Tasks saved in localStorage.
🛠 Cleanup – Event listeners removed in beforeDestroy().

🚀 What’s Next?

Create :

More student productivity tools (like a GPA Calculator)!
Vue 3 with Composition API version!
Enhancements (like notifications)!