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/onMountedonBeforeUpdate/onUpdatedonBeforeUnmount/onUnmountedonErrorCapturedonActivated/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.