Skip to main content

List all the lifecycle hooks.

VueJunior~1 min read
Suggest an edit

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

Initialization

  1. beforeCreate
  2. created

Mounting

  1. beforeMount
  2. mounted

Updating

  1. beforeUpdate
  2. updated

Unmounting

  1. beforeUnmount (Vue 3) (in Vue 2, beforeDestroy)
  2. unmounted (Vue 3) (in Vue 2, destroyed)

Working with <keep-alive>

  1. activated
  2. deactivated

Error handling

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

  1. onBeforeUpdate
  2. onUpdated

Unmounting

  1. onBeforeUnmount
  2. onUnmounted

Working with <keep-alive>

  1. onActivated
  2. onDeactivated

Errors

  1. onErrorCaptured

Reactivity debugging

  1. onRenderTracked
  2. onRenderTriggered

SSR

  1. onServerPrefetch

Cleanup in composables

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

Short Answer

Interview ready
Premium

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

Suggest an edit