Lifecycle Phases Overview
Creation, mounting, updating, unmounting — what happens in each phase.
Lifecycle Phases Overview is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “Lifecycle Phases Overview” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “Lifecycle Phases Overview”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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
- Lifecycle Phases Overview
- onMounted and onBeforeMount
- onUpdated and onBeforeUpdate
- onUnmounted and Cleanup Patterns