What are Vue's lifecycle hooks?

Question

Accepted Answer

**Lifecycle hooks** let you run code at specific moments in a component's life — creation, mounting to the DOM, updating, and removal. In the Composition API they're functions you call inside `setup`. ## The main hooks in order ```vue ``` ## The full sequence ```text setup() runs → reactive state created (no DOM yet) onBeforeMount → just before first render onMounted → DOM ready ★ (fetch data, access $refs, init 3rd-party libs) ── component lives, reacting to changes ── onBeforeUpdate / onUpdated → around re-renders from reactive changes ── component removed ── onBeforeUnmount / onUnmounted → cleanup ★ (timers, listeners, subscriptions) ``` ## The two you use most - **`onMounted`** — the element exists in the DOM. Do anything that needs the real DOM or should run once on load: fetch initial data, measure elements, initialize a chart/map library, add event listeners. - **`onUnmounted`** — the component is leaving. **Clean up** to prevent memory leaks: clear intervals/timeouts, remove `window`/`document` listeners, cancel subscriptions or in-flight requests. ```vue ``` The `onMounted`/`onUnmounted` pairing for setup-and-teardown is one of the most important patterns — forgetting cleanup causes leaks and "ghost" listeners. ## Options API equivalents ```text mounted(), updated(), unmounted(), created(), beforeUnmount() ... ``` ## Why it matters Lifecycle hooks are how you coordinate side effects with a component's existence — running setup logic when it appears (`onMounted`) and tearing it down when it leaves (`onUnmounted`). Mastering these two especially (and always cleaning up what you set up) prevents memory leaks and is essential for integrating data fetching, timers, and third-party libraries into Vue components.