Suggest an edit

Improve this article

Refine the answer for “What lifecycle hooks are available in the Composition API?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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**.

```js
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.

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

---

### **3.** `onBeforeUpdate()`

Called **before the DOM updates**.

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

---

### **4.** `onUpdated()`

The DOM has already been updated.

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

---

### **5.** `onBeforeUnmount()`

The component **is about to be removed**.

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

---

### **6.** `onUnmounted()`

The component has been fully removed from the DOM.

```js
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>`.

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

---

### `onDeactivated()`

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

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

---

### `onErrorCaptured()`

Captures errors from child components (equivalent to `errorCaptured`).

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

---

### `onRenderTracked()`

Called when a reactive dependency is tracked (debug).

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

---

### `onRenderTriggered()`

Called if a data change triggered a re-render.

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

---

### `onServerPrefetch()`

Used only in SSR for server-side prefetching.

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

Markdown · drag & drop images · ⌘B / ⌘I shortcuts388 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.