onUnmounted and Cleanup Patterns
Clearing intervals, removing event listeners, canceling requests in onUnmounted.
Cleaning Up After Yourself
When a component is removed, anything it started — timers, listeners, subscriptions, network requests — keeps running unless you stop it. The onUnmounted hook is where you clean up to prevent memory leaks and bugs.
The onUnmounted Hook
onUnmounted fires after the component has been removed from the DOM. It is the last chance to release resources.
<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
console.log('component removed')
})
</script>All lessons in this course
- Lifecycle Phases Overview
- onMounted and onBeforeMount
- onUpdated and onBeforeUpdate
- onUnmounted and Cleanup Patterns