Suggest an edit

Improve this article

Refine the answer for “Lifecycle hooks”. 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)

Vue 3 has **two sets of lifecycle hooks**:

1. Hooks for the **Composition API**
2. Hooks for the **Options API**

## Lifecycle hooks (Composition API)

Used inside `<script setup>` or a regular `setup()`.

### **Component mounting**

| Hook | When it is called |
|---|---|
| **onBeforeMount** | before the component is inserted into the DOM |
| **onMounted** | after the component is inserted into the DOM |

### **Component updating**

| Hook | When it is called |
|---|---|
| **onBeforeUpdate** | before the DOM updates |
| **onUpdated** | after the DOM updates |

### **Component unmounting**

| Hook | When it is called |
|---|---|
| **onBeforeUnmount** | before the component is removed |
| **onUnmounted** | after it is removed from the DOM |

### **Error handling**

| Hook | When it is called |
|---|---|
| **onErrorCaptured** | when an error is caught in a child component |

### **Transitions (animations)**

| Hook | When it is called |
|---|---|
| **onRenderTracked** | tracks reactivity dependencies |
| **onRenderTriggered** | called when a reactive update triggers |

(rarely used, but they exist)

### **keep-alive components**

| Hook | When it is called |
|---|---|
| **onActivated** | when the component is "activated" (returns from the cache) |
| **onDeactivated** | when the component is "deactivated" (goes into the cache) |

---

## Hooks (Options API)

If the old format is used (`export default {}`).

### Mounting:

- **beforeCreate**
- **created**
- **beforeMount**
- **mounted**

### Updating:

- **beforeUpdate**
- **updated**

### Unmounting:

- **beforeUnmount**
- **unmounted**

### Keep-alive:

- **activated**
- **deactivated**

### Errors:

- **errorCaptured**

---

## Summary (cheat sheet)

#### **Composition API (main):**

- **onBeforeMount**
- **onMounted**
- **onBeforeUpdate**
- **onUpdated**
- **onBeforeUnmount**
- **onUnmounted**
- **onErrorCaptured**
- **onActivated / onDeactivated**
- **onRenderTracked / onRenderTriggered**

#### **Options API (old format):**

- **beforeCreate / created**
- **beforeMount / mounted**
- **beforeUpdate / updated**
- **beforeUnmount / unmounted**
- **activated / deactivated**
- **errorCaptured**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.