Lifecycle Hooks

onMounted

Common place to fetch data or touch the DOM after the component is on the page.

<script setup>
import { onMounted, ref } from "vue";

const ready = ref(false);

onMounted(() => {
  ready.value = true;
  console.log("mounted");
});
</script>

onUnmounted

Clean up timers and listeners.

import { onUnmounted } from "vue";

const id = setInterval(() => {}, 1000);
onUnmounted(() => clearInterval(id));

Other hooks

• onUpdated — after DOM updates from state changes
• onBeforeMount / onBeforeUnmount — rarer for beginners
• Prefer explicit user actions for saves; do not overuse update hooks

Composition-friendly

Hooks in script setup register for the current component instance automatically.