Lifecycle

ELI5 — The Vibe Check

The lifecycle is a component's life story — it's born (mounted), lives and updates (updates), then dies (unmounted). Frameworks give you hooks into these moments so you can run code at the right time, like fetching data when the component appears on screen.

Real Talk

Component lifecycle refers to the sequence of phases a component goes through: creation, mounting to the DOM, updating on state/prop changes, and unmounting. Lifecycle hooks let you execute code at specific phases — e.g., onMounted for initial data fetching or onUnmounted for cleanup.

Show Me The Code

// Vue Composition API
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Component is live!');
  startPolling();
});

onUnmounted(() => {
  stopPolling();
});

When You'll Hear This

"Fetch the data in the mounted lifecycle hook, not in the template." / "Clean up your event listeners in onUnmounted or you'll get memory leaks."