A Component's Life

So far, a component was simply there: App showed it, and it stayed. But with v-if, a component can come and go. Every component has a lifecycle, the steps of its life, and Vue takes it through them:

1. Created: Vue runs the component's <script setup>. Its refs and functions exist now, but nothing is on the page yet.
2. Mounted: Vue makes the elements of the template and puts them on the page.
3. Updated: when the component's state changes, Vue updates its elements. That can happen many times.
4. Unmounted: Vue removes the component from the page, for example when the v-if that shows it becomes false. Its elements and its state are gone.

You can run code of your own at these moments. Vue has a function for each of them, called a lifecycle hook: onMounted(), onUpdated() and onUnmounted(). You import them from "vue", call them at the top of <script setup> and give them a function, which Vue calls at that moment. Here's a counter of cups that says in the console what happens to it:

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

const cups = ref(0);
console.log("Created");

onMounted(() => {
    console.log("Mounted");
});

onUpdated(() => {
    console.log("Updated");
});

onUnmounted(() => {
    console.log("Unmounted");
});

function addCup() {
    cups.value++;
}
</script>

<template>
    <button @click="addCup">Cups: {{ cups }}</button>
</template>

App shows it with <CupCounter v-if="shown" />. Show it, click its button once and hide it again, and the console shows:

Created
Mounted
Updated
Unmounted

Created comes first, and without a hook: the code at the top of <script setup> runs right away, when Vue creates the component. The functions given to the hooks run later, each at its moment.

Show the counter again, and Vue creates a new one: the console says Created and Mounted again, and the cups start at 0. An unmounted component never comes back, and its state goes with it. State that has to stay belongs to a component that stays on the page, such as App, which passes it down in props, as in the lesson Component Events.

You'll use onMounted and onUnmounted the most: in the next exercises, you'll load data when a component is mounted and stop a timer when it's unmounted. onUpdated is rarely needed.

Typical mistakes:

• Forgetting the import: the console says ReferenceError: onMounted is not defined.
• Giving the hook a call instead of a function: onMounted(console.log("Mounted")) prints right away, when the component is created, and when it's mounted, Vue reports TypeError: hook is not a function. A hook needs a function that Vue can call later: onMounted(() => { … }).