Vue 3 Lifecycle in Vue.js
From the Vue.js cheat sheet · Lifecycle Hooks · verified Jul 2026
Vue 3 Lifecycle
Composition API lifecycle hooks
vue
<script setup>
import {
onMounted,
onUpdated,
onUnmounted,
onBeforeMount,
onBeforeUpdate,
onBeforeUnmount
} from 'vue'
onMounted(() => {
console.log('Component mounted')
})
onUnmounted(() => {
console.log('Component unmounted')
})
</script>💡 Setup runs before all lifecycle hooks in Composition API
⚡ Use mounted for DOM access, created/setup for data init
📌 Always cleanup in unmounted (timers, listeners, subscriptions)
🔥 Keep-alive hooks only work with <keep-alive> wrapper