Every Vue component goes through a lifecycle: created, mounted, updated, and unmounted. Composition API hooks let you run code at each stage.

Lifecycle Overview 

  setup() → onBeforeMount → onMounted → onBeforeUpdate → onUpdated → onBeforeUnmount → onUnmounted

In <script setup>, hooks register automatically when the component is created.

onMounted — After DOM Insert

Run code after the component is inserted into the DOM — ideal for fetching data or accessing DOM elements:

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

const posts = ref([]);
const loading = ref(true);

onMounted(async () => {
  const response = await fetch('/api/posts');
  posts.value = await response.json();
  loading.value = false;
});
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

onUpdated — After Re-render

Runs after reactive state changes cause a re-render:

  <script setup>
import { ref, onUpdated } from 'vue';

const count = ref(0);

onUpdated(() => {
  console.log('DOM updated, count is', count.value);
});
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

Avoid mutating state inside onUpdated — it can cause infinite update loops.

onUnmounted — Cleanup

Run cleanup when the component is removed — cancel timers, remove listeners, abort requests:

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

const time = ref(new Date().toLocaleTimeString());
let timer;

onMounted(() => {
  timer = setInterval(() => {
    time.value = new Date().toLocaleTimeString();
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<template>
  <p>Current time: {{ time }}</p>
</template>

Cancel in-flight fetch requests on unmount with AbortController in onMounted/onUnmounted.

Hook Reference

Hook When it runs
onBeforeMount Before initial render
onMounted After DOM insertion
onBeforeUpdate Before re-render
onUpdated After re-render
onBeforeUnmount Before removal
onUnmounted After removal

Next: bind form inputs with v-model for two-way data binding.