What are Vue Lifecycle Hooks? | Vue.js Interview Questions

What You'll Learn

Lifecycle stages
Common hooks
Composition API hooks

Lifecycle Diagram

Creation → Mounting → Updating → Unmounting

Composition API Hooks

code.jsJavaScript

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

// Before DOM is mounted
onBeforeMount(() => {
  console.log('Before mount')
})

// After DOM is mounted
onMounted(() => {
  console.log('Mounted - DOM available')
})

// Before reactive update
onBeforeUpdate(() => {
  console.log('Before update')
})

// After reactive update
onUpdated(() => {
  console.log('Updated')
})

// Before unmount
onBeforeUnmount(() => {
  console.log('Cleanup here')
})

// After unmount
onUnmounted(() => {
  console.log('Unmounted')
})

Common Use Cases

Hook	Use Case
onMounted	Fetch data, DOM access
onUpdated	React to DOM changes
onBeforeUnmount	Cleanup timers, listeners