Vue.js: How do you use lifecycle hooks?

Composition API — onMounted, onUnmounted, etc.

Basic:

1<script setup>
2import { onMounted, onUnmounted, ref } from "vue"
3
4const data = ref(null)
5
6onMounted(async () => {
7  data.value = await fetchData()
8})
9
10onUnmounted(() => {
11  // Cleanup
12})
13</script>

Hooks list:

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• onActivated
• onDeactivated

Key: onMounted for setup, onUnmounted for cleanup.