Život komponenty

Až dosud komponenta prostě byla: App ji ukázala a ona zůstala. S v-if ale komponenta může přijít i odejít. Každá komponenta má svůj životní cyklus, kroky, kterými za svůj život projde, a Vue ji jimi provede:

1. Vytvoření (created): Vue spustí <script setup> komponenty. Její refy a funkce už existují, ale na stránce zatím nic není.
2. Připojení (mounted): Vue vytvoří prvky šablony a vloží je do stránky.
3. Aktualizace (updated): když se změní stav komponenty, Vue její prvky aktualizuje. To se může stát mnohokrát.
4. Odpojení (unmounted): Vue komponentu odstraní ze stránky, třeba když přestane platit v-if, které ji ukazuje. Její prvky i stav zmizí.

V těchto chvílích můžete spustit vlastní kód. Vue má pro každou z nich funkci, funkci životního cyklu (anglicky lifecycle hook): onMounted(), onUpdated() a onUnmounted(). Importujete je z "vue", zavoláte je nahoře v <script setup> a předáte jim funkci, kterou Vue v tu chvíli zavolá. Tady je komponenta s počítadlem šálků, která do konzole píše, co se s ní děje:

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

const salky = ref(0);
console.log("Vytvořena");

onMounted(() => {
    console.log("Připojena");
});

onUpdated(() => {
    console.log("Aktualizována");
});

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

function pridejSalek() {
    salky.value++;
}
</script>

<template>
    <button @click="pridejSalek">Šálky: {{ salky }}</button>
</template>

App ji ukazuje pomocí <Pocitadlo v-if="ukazat" />. Když ji ukážete, jednou kliknete na její tlačítko a zase ji skryjete, konzole ukáže:

Vytvořena
Připojena
Aktualizována
Odpojena

Vytvořena je první, a to bez funkce životního cyklu: kód nahoře v <script setup> běží hned, když Vue komponentu vytváří. Funkce předané onMounted() a ostatním běží až později, každá ve svou chvíli.

Když komponentu ukážete znovu, Vue vytvoří novou: konzole znovu ukáže Vytvořena a Připojena a šálky začnou od 0. Odpojená komponenta se už nevrátí a její stav zmizí s ní. Stav, který má zůstat, patří komponentě, která na stránce zůstává, třeba App, která ho pak komponentám předává v props, jako v lekci Události komponent.

Nejčastěji budete používat onMounted a onUnmounted: v dalších cvičeních budete po připojení komponenty načítat data a při jejím odpojení zastavovat časovač. onUpdated potřebujete jen zřídka.

Typické chyby:

• Chybějící import: konzole hlásí ReferenceError: onMounted is not defined.
• Volání místo funkce: onMounted(console.log("Připojena")) vypíše text hned při vytvoření komponenty a při připojení Vue ohlásí TypeError: hook is not a function. Funkce životního cyklu potřebuje funkci, kterou Vue zavolá později: onMounted(() => { … }).