Vue Academy · Lesson

Lifecycle Phases Overview

Creation, mounting, updating, unmounting — what happens in each phase.

Lifecycle Phases Overview is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

A Component Has a Life

Every Vue component goes through a predictable journey: it is created, mounted into the page, updated as data changes, and finally removed. These are the lifecycle phases, and Vue lets you hook into each one.

The Four Phases

Creation — setup runs, reactivity is initialized.
Mounting — the DOM is created and inserted.
Updating — reactive changes trigger re-renders.
Unmounting — the component is removed and cleaned up.

Phase 1: Creation

First, the component instance is created and reactivity is wired up. In the Composition API, <script setup> (or setup()) runs here. The DOM does not exist yet, so you cannot read elements at this point.

What You Can Do During Creation

Creation is a good time to declare reactive state and start non-DOM work, like kicking off a data fetch. Just remember the template has not rendered, so DOM refs are still empty.

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

Phase 2: Mounting

Next Vue creates the actual DOM nodes from your template and inserts them into the page. After mounting, template refs point to real elements and you can measure or manipulate the DOM.

The Mounting Hook

onMounted runs once, right after the component is inserted. This is the place for DOM-dependent setup like initializing a chart or focusing an input.

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

Phase 3: Updating

When reactive data a component depends on changes, Vue re-renders and patches the DOM efficiently — only the parts that changed. This update cycle can happen many times during a component life.

The Update Hooks

onBeforeUpdate runs just before the DOM is patched, and onUpdated runs just after. They fire on every reactive change that affects the render.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

Phase 4: Unmounting

When a component is removed — via v-if, route change, or list removal — Vue tears it down. This is your chance to clean up timers, listeners, and subscriptions to avoid memory leaks.

The Unmount Hook

onUnmounted runs after the component is gone. Cancel intervals, remove global listeners, and abort in-flight requests here.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

The Full Order

The hooks fire in this order over a component life: setup, onBeforeMount, onMounted, then repeated onBeforeUpdate/onUpdated pairs, and finally onBeforeUnmount/onUnmounted.

Quick Check

Confirm your grasp of the lifecycle.

Recap

You now see the whole picture:

Creation: setup runs, reactivity ready, no DOM.
Mounting: DOM created and inserted; refs become usable.
Updating: reactive change triggers an efficient patch.
Unmounting: component removed; clean up here.

Frequently asked questions

Is the “Lifecycle Phases Overview” lesson free?

Yes — the full text of “Lifecycle Phases Overview” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Lifecycle Phases Overview”?

Creation, mounting, updating, unmounting — what happens in each phase. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Lifecycle Phases Overview” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy