Shrnutí

V této lekci jste se naučili, že:

• Komponenta má životní cyklus: vytvoří se (proběhne její <script setup>), připojí se (její prvky se vloží do stránky), aktualizuje se (po každé změně stavu) a odpojí se (zmizí ze stránky, třeba kvůli v-if, a s ní i její stav).
• Funkce životního cyklu v těchto chvílích spustí váš kód: onMounted(() => { … }), onUpdated() a onUnmounted(). Importují se z "vue" a volají se nahoře v <script setup>.
• Data ze souboru se načítají v onMounted, pomocí funkce async, fetch() a odpoved.json(). S refem jako nacitani šablona mezitím ukáže Načítám…. await nikdy nepište nahoru do <script setup>: komponenta pak neukáže nic.
• odpoved.ok je false, když server odpověděl chybou, třeba 404 Not Found při překlepu v názvu souboru. Zkontrolujte ho a místo dat ukažte chybovou zprávu.
• Co komponenta spustí, to i zastaví: interval spuštěný v onMounted se zastavuje v onUnmounted pomocí clearInterval(). Jinak běží dál i potom, co komponenta zmizela.
• Ref na prvek vám dá prvek šablony: ref="hledani" v šabloně a const hledani = useTemplateRef("hledani"); ve skriptu. hledani.value je prvek, jakmile je komponenta připojená, a předtím null.
• Co je uložené v localStorage, přečtěte už při vytvoření refu, protože localStorage odpoví hned, a watch to při každé změně uloží.

V další lekci, Composables, přesunete kód jako načítání nabídky z komponent do samostatných funkcí, které může použít kterákoli komponenta.

Nejdřív si ale vše procvičte na stránce s názory hostů: načte, co hosté napsali, dá kurzor do textového pole pro váš vlastní názor a zapamatuje si, co jste napsali, i když stránku zavřete.