Zastavení časovače

Některé věci, které komponenta spustí, běží samy dál. Interval z setInterval() se opakuje znovu a znovu, dokud ho něco nezastaví pomocí clearInterval(), jak to znáte z kurzu JavaScriptu. Když ho spustí komponenta, musí ho taky zastavit, a to při svém odpojení. Tady je pruh, který každé tři sekundy ukáže jinou specialitu kavárny:

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

const speciality = ["Mrkvový dort", "Cheesecake", "Mátový čaj"];
const index = ref(0);
let casovac;

onMounted(() => {
    casovac = setInterval(() => {
        index.value = (index.value + 1) % speciality.length;
    }, 3000);
});

onUnmounted(() => {
    clearInterval(casovac);
});
</script>

<template>
    <p>Ochutnejte: {{ speciality[index] }}</p>
</template>

%, zbytek po dělení, vrátí index po poslední specialitě zpátky na 0. A všimněte si, že:

• casovac je vytvořený mimo obě funkce životního cyklu, pomocí let, aby ho mohly použít obě: onMounted do něj uloží id intervalu a onUnmounted tento interval zastaví.
• Interval se spouští v onMounted. Nahoře v <script setup> by fungoval taky, ale v onMounted se spustí, až je komponenta na stránce, a obě funkce se čtou jako dvojice: co jedna spustí, druhá zastaví.

Co kdyby onUnmounted chyběla? Interval o komponentách nic neví. Když Vue pruh ze stránky odstraní, interval běží dál, dokud je stránka otevřená, a mění ref, který už nic neukazuje. Pokaždé, když se pruh znovu ukáže, nová komponenta spustí další interval. Na stránce to neuvidíte, ale v konzoli ano, a právě to si v tomto cvičení vyzkoušíte.

Totéž platí pro setTimeout(), který ještě neproběhl, nebo pro posluchač přidaný pomocí window.addEventListener(): co komponenta spustí, to onUnmounted zastaví.

Typická chyba: const casovac = setInterval(…) uvnitř onMounted. Taková konstanta existuje jen ve funkci předané onMounted, a onUnmounted proto interval zastavit nemůže.