The Vue Instance Lifecycle

Analogy categoryAnalogies

Every Vue component instance goes through a predictable sequence of stages: creation, template compilation, DOM mounting, reactive updates, and eventual unmounting. Vue exposes lifecycle hooks — functions you can register to run at specific points in this sequence — so you can perform setup work like fetching data, attaching event listeners, or initializing third-party libraries, and cleanup work like clearing timers or removing listeners before the component is destroyed.

🏏

Cricket analogy: Like a cricketer's career following a predictable arc — selection trials, training camp, debut match, ongoing seasons, and eventual retirement — with specific checkpoints (lifecycle hooks) where the board schedules a fitness test before debut or arranges a farewell tour before retirement.

The Mounting Sequence

When a component is created, Vue first sets up reactive state (props, data, computed properties) — in the Composition API this happens implicitly as the setup() function or <script setup> block runs. Next comes the mounting phase: Vue compiles the template into a render function (if not precompiled), creates the initial DOM elements, and inserts them into the page. The onBeforeMount hook fires right before this DOM insertion, and onMounted fires immediately after, once the component's DOM is fully in place — this is the correct place to access the DOM via template refs or to initiate data fetching that needs the rendered layout.

🏏

Cricket analogy: Like a stadium's setup crew first preparing the pitch and equipment (reactive state), then compiling the day's fielding plan into an actual positioning script, placing fielders on the ground right before play — the umpire signals 'ready' just before players take the field (onBeforeMount) and 'play' is called right after everyone is in position (onMounted), which is exactly when the coach can start reading live field spacing.

Update and Unmount Phases

After mounting, whenever reactive state used in the template changes, Vue schedules a re-render. onBeforeUpdate fires before the DOM is patched with new values, and onUpdated fires after the patch completes — these are used sparingly, typically for measuring or reacting to DOM changes after a re-render. Finally, when a component is removed from the tree (for example, navigating away in Vue Router, or a v-if becoming false), Vue runs the unmounting phase: onBeforeUnmount fires while the component is still fully functional, and onUnmounted fires after it has been torn down. Cleanup — removing event listeners, clearing intervals, cancelling network requests — belongs in onBeforeUnmount or onUnmounted.

🏏

Cricket analogy: Like a scoreboard operator who gets a heads-up just before updating the display after a boundary (onBeforeUpdate) and confirms the new total is live right after (onUpdated), and later, when the match ends and the ground is being vacated (unmounting), the PA system is switched off and the floodlight timers are cancelled during teardown (onBeforeUnmount/onUnmounted) rather than left running.

vue

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

const windowWidth = ref(window.innerWidth)

function updateWidth() {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', updateWidth)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateWidth)
})
</script>

<template>
  <p>Window width: {{ windowWidth }}px</p>
</template>

In the Composition API, lifecycle hooks are imported functions (onMounted, onUpdated, onUnmounted, etc.) called directly inside setup() or <script setup>, rather than object properties as in the Options API (mounted(), updated(), unmounted()). Both styles map to the exact same underlying lifecycle — only the syntax for registering the callback differs.

There is no onCreated hook in the Composition API — code that would run in the Options API's created() hook simply runs as top-level code in setup() or <script setup>, since that code executes synchronously during instance creation, before mounting.

The Vue lifecycle moves through creation, mounting, updating, and unmounting phases.
onMounted runs after the component's DOM has been inserted — ideal for DOM access and data fetching.
onBeforeUpdate/onUpdated bracket reactive re-renders triggered by state changes.
onBeforeUnmount/onUnmounted bracket component teardown — the right place for cleanup.
Composition API hooks are imported functions called inside setup()/<script setup>.
There is no direct onCreated equivalent — that logic is just top-level setup() code.

Practice what you learned

1. Which Composition API hook fires right after a component's DOM has been inserted into the page?

2. Where should you remove a window event listener that was added in onMounted?

3. In the Composition API, how is the Options API's created() hook logic typically expressed?

4. What triggers the onBeforeUpdate and onUpdated hooks?

5. How do you register an onMounted hook in <script setup>?

Was this page helpful?

Template Syntax

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#JavaScript#VueJsStudyNotes#WebDevelopment#TheVueInstanceLifecycle#Vue#Instance#Lifecycle#Mounting#StudyNotes#SkillVeris

The Vue Instance Lifecycle