What lifecycle hooks are available in the Composition API?

VueJunior~1 min read

In the Composition API (Vue 3), the same lifecycle stages are available as in the Options API, but the hooks are called via functions imported from vue.

In simpler terms:

All lifecycle hooks in the Composition API are functions of the form onXxx(...), called inside setup().

Below is the full list, including the core, additional, and less common hooks.

Core lifecycle hooks (Composition API)

Options API	Composition API
beforeCreate	not available (the equivalent is code in `setup`)
created	not available (the equivalent is code in `setup`)
beforeMount	`onBeforeMount`
mounted	`onMounted`
beforeUpdate	`onBeforeUpdate`
updated	`onUpdated`
beforeUnmount	`onBeforeUnmount`
unmounted	`onUnmounted`

1. `onBeforeMount()`

Called before the component is mounted.

onBeforeMount(() => {
  console.log("Before mounting");
});

2. `onMounted()`

The component has entered the DOM; you can now work with the DOM, refs, and third-party libraries.

onMounted(() => {
  console.log("Component mounted");
});

3. `onBeforeUpdate()`

Called before the DOM updates.

onBeforeUpdate(() => {
  console.log("Before update");
});

4. `onUpdated()`

The DOM has already been updated.

onUpdated(() => {
  console.log("Component updated");
});

5. `onBeforeUnmount()`

The component is about to be removed.

onBeforeUnmount(() => {
  console.log("Before removal");
});

6. `onUnmounted()`

The component has been fully removed from the DOM.

onUnmounted(() => {
  console.log("Component removed");
});

Additional and advanced hooks

These hooks are used less often, but an interviewer might ask about them.

`onActivated()`

The component became active again after being restored from <keep-alive>.

onActivated(() => {
  console.log("Component activated");
});

`onDeactivated()`

The component was hidden but not destroyed (also <keep-alive>).

onDeactivated(() => {
  console.log("Component deactivated");
});

`onErrorCaptured()`

Captures errors from child components (equivalent to errorCaptured).

onErrorCaptured((err, instance, info) => {
  console.log(err);
});

`onRenderTracked()`

Called when a reactive dependency is tracked (debug).

onRenderTracked((event) => {
  console.log("tracked:", event);
});

`onRenderTriggered()`

Called if a data change triggered a re-render.

onRenderTriggered((event) => {
  console.log("triggered:", event);
});

`onServerPrefetch()`

Used only in SSR for server-side prefetching.

onServerPrefetch(async () => {
  await fetchData();
});

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.