Жизнь компонента

До сих пор компонент просто был на странице: App показывал его, и он оставался. Но с v-if компонент может появляться и исчезать. У каждого компонента есть жизненный цикл — этапы его жизни, и Vue проводит компонент через них:

1. Создан: Vue выполняет <script setup> компонента. Его рефы и функции уже существуют, но на странице пока ничего нет.
2. Смонтирован: Vue создаёт элементы шаблона и помещает их на страницу.
3. Обновлён: когда состояние компонента меняется, Vue обновляет его элементы. Это может происходить много раз.
4. Размонтирован: Vue убирает компонент со страницы, например когда v-if, который его показывает, становится ложным. Его элементы и его состояние исчезают.

В эти моменты можно запускать собственный код. Для каждого из них у Vue есть своя функция, которую называют хуком жизненного цикла: onMounted(), onUpdated() и onUnmounted(). Их импортируют из "vue", вызывают в начале <script setup> и передают им функцию, которую Vue вызовет в нужный момент. Вот счётчик чашек, который сообщает в консоль, что с ним происходит:

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

const cups = ref(0);
console.log("Создан");

onMounted(() => {
    console.log("Смонтирован");
});

onUpdated(() => {
    console.log("Обновлён");
});

onUnmounted(() => {
    console.log("Размонтирован");
});

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

<template>
    <button @click="addCup">Чашек: {{ cups }}</button>
</template>

App показывает его так: <CupCounter v-if="shown" />. Покажите счётчик, нажмите на его кнопку один раз и снова скройте — в консоли появится:

Создан
Смонтирован
Обновлён
Размонтирован

Первым идёт Создан, причём без хука: код в начале <script setup> выполняется сразу, когда Vue создаёт компонент. Функции, переданные хукам, выполняются позже, каждая в свой момент.

Покажите счётчик снова, и Vue создаст новый: в консоли опять появятся Создан и Смонтирован, а чашки начнут с 0. Размонтированный компонент не возвращается, и его состояние уходит вместе с ним. Состояние, которое должно сохраняться, принадлежит компоненту, остающемуся на странице, например App, который передаёт его вниз в пропсах, как в уроке «События компонентов».

Чаще всего вы будете использовать onMounted и onUnmounted: в следующих упражнениях вы загрузите данные, когда компонент смонтирован, и остановите таймер, когда он размонтирован. onUpdated нужен редко.

Типичные ошибки:

• Забыть импорт: консоль сообщает ReferenceError: onMounted is not defined.
• Передать хуку вызов вместо функции: onMounted(console.log("Смонтирован")) выводит текст сразу, при создании компонента, а когда компонент монтируется, Vue сообщает TypeError: hook is not a function. Хуку нужна функция, которую Vue сможет вызвать позже: onMounted(() => { … }).