Lifecycle Hooks

Lifecycle Hooks: Running Code Across Component Phases

Vue lifecycle hooks let you run code at specific moments in a component's life, such as after it mounts to the DOM, after state triggers a DOM update, or right before it unmounts.

In <script setup>, you import lifecycle functions like onMounted and onUnmounted from 'vue'. Notice there are no onCreated or onBeforeCreate hooks because top-level code inside <script setup> already runs during component creation.

flowchart LR
    Setup["script setup runs"] --> Mount["onMounted (DOM Ready)"]
    Mount --> Update["onUpdated (After DOM Patch)"]
    Mount --> Unmount["onUnmounted (Cleanup)"]

Options API vs Composition API Lifecycle Mapping

Practical SFC Lifecycle Hook Example

Pairing setup logic with cleanup inside onUnmounted keeps long-lived timers and event listeners under control. This timer component starts an interval inside onMounted and clears that interval inside onUnmounted so background timers never leak memory.

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

const timerSeconds = ref(0);
let intervalId = null;

onMounted(() => {
  intervalId = setInterval(() => {
    timerSeconds.value++;
  }, 1000);
});

onUpdated(() => {
  console.log('DOM updated at:', timerSeconds.value);
});

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

<template>
  <div class="timer-box">
    <h3>Active Session Timer</h3>
    <p>Elapsed Time: <strong>{{ timerSeconds }}s</strong></p>
  </div>
</template>

Common Mistakes

• Forgetting Cleanup in onUnmounted: Leaving setInterval, window.addEventListener, or WebSocket connections open after a component unmounts causes memory leaks and duplicate callbacks.
• Mutating State Inside onUpdated: Changing reactive state inside onUpdated() triggers another render cycle, which can trap your component in an infinite update loop. Use watch() instead.
• Registering Hooks Asynchronously: Calling onMounted() after an await inside <script setup> fails because Vue loses track of the current component instance. Register all hooks synchronously at the top level.

Frequently Asked Questions

Where should I fetch initial API data in <script setup>?

Call your fetch function inside onMounted() for client-side data loading, or invoke it at the top level if using <Suspense> with async setup.

Can I call onMounted() multiple times in one component?

Yes. Composables and <script setup> can each register their own onMounted() and onUnmounted() callbacks, and Vue runs every registered hook in order.

Do lifecycle hooks run during Server-Side Rendering (SSR)?

No. onMounted, onUpdated, and onUnmounted only run in the browser because there is no browser DOM on the server.