Lifecycle hooks
Vue 3 has two sets of lifecycle hooks:
- Hooks for the Composition API
- 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
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.