Vue Lifecycle Hooks Explained — Component Lifecycle

In this tutorial, you will learn about Vue Lifecycle Hooks Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue lifecycle hooks allow you to run code at specific stages of a component's existence, from creation and mounting to updates and destruction.

What You'll Learn

• All lifecycle hooks in order
• Options API lifecycle
• Composition API lifecycle
• When hooks run
• Practical use cases

Why It Matters

Lifecycle hooks are essential for setup and teardown: fetching data on mount, starting timers, subscribing to events, and cleaning up resources on unmount.

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>Component has been alive for {{ seconds }} seconds</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onErrorCaptured } from "vue";

const title = ref("Lifecycle Demo");
const seconds = ref(0);
let intervalId;

onMounted(() => {
  console.log("Component mounted");
  intervalId = setInterval(() => {
    seconds.value++;
  }, 1000);
});

onUnmounted(() => {
  console.log("Component unmounted");
  clearInterval(intervalId);
});

onErrorCaptured((err) => {
  console.error("Error caught:", err);
  return false;
});
</script>

Expected output: A timer starts when the component mounts and increments every second. The interval cleans up when unmounting.