Back
VueMediumNew

Explain the Vue component lifecycle hooks in the Composition API

onMounted, onUpdated, onUnmounted, etc.

Ideal Answer

In the Composition API, lifecycle hooks are imported functions called inside setup() or <script setup>, roughly corresponding to Options API hooks:

  • onBeforeMount / onMounted
  • onBeforeUpdate / onUpdated
  • onBeforeUnmount / onUnmounted
  • onErrorCaptured
  • onActivated / onDeactivated (for <KeepAlive>)
JavaScript
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('component mounted')
})
onUnmounted(() => {
  console.log('cleanup here')
})

Note there's no beforeCreate/created equivalent — that logic just goes directly in setup(), since setup() itself runs at that point in the lifecycle.