Suggest an edit

Improve this article

Refine the answer for “List all the 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)

## **Lifecycle hooks - Options API (Vue 2 and Vue 3)**

### **Initialization**

1. **beforeCreate**
2. **created**

### **Mounting**

3. **beforeMount**
4. **mounted**

### **Updating**

5. **beforeUpdate**
6. **updated**

### **Unmounting**

7. **beforeUnmount** *(Vue 3)*
(in Vue 2, **beforeDestroy**)
8. **unmounted** *(Vue 3)*
(in Vue 2, **destroyed**)

### **Working with** `<keep-alive>`

9. **activated**
10. **deactivated**

### **Error handling**

11. **errorCaptured**

---

## **Lifecycle hooks - Composition API (Vue 3)**

Imported from `vue`:

```js
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  onServerPrefetch,
  onScopeDispose
} from 'vue'
```

### **Mounting**

1. **onBeforeMount**
2. **onMounted**

### **Updating**

3. **onBeforeUpdate**
4. **onUpdated**

### **Unmounting**

5. **onBeforeUnmount**
6. **onUnmounted**

### **Working with** `<keep-alive>`

7. **onActivated**
8. **onDeactivated**

### **Errors**

9. **onErrorCaptured**

### **Reactivity debugging**

10. **onRenderTracked**
11. **onRenderTriggered**

### **SSR**

12. **onServerPrefetch**

### **Cleanup in composables**

13. **onScopeDispose**

---

## Important for interviews

- The Options API and Composition API have **different** hook chains.
- In Vue 3, the unmounting hooks have new names:
**beforeUnmount / unmounted** instead of **beforeDestroy / destroyed**.
- The Composition API has more hooks, especially for debugging and SSR.

---

## Final list (short)

#### Options API:

```
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount (beforeDestroy)
unmounted (destroyed)
activated
deactivated
errorCaptured
```

#### Composition API:

```
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onActivated
onDeactivated
onErrorCaptured
onRenderTracked
onRenderTriggered
onServerPrefetch
onScopeDispose
```

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.