Vue.js Lifecycle Hooks Demo 🔄

Tento projekt slouží k demonstraci životního cyklu komponent ve Vue.js (verze 3). Obsahuje interaktivní příklady, které vypisují zprávy do konzole prohlížeče (DevTools), abyste mohli sledovat, v jakém pořadí se jednotlivé metody spouštějí.

🚀 Jak začít

Nainstalujte závislosti: Otevřete terminál v této složce a spusťte:
```
npm install
```
Spusťte vývojový server:
```
npm run serve
```
Otevřete aplikaci: Klikněte na odkaz v terminálu (obvykle http://localhost:8080).
DŮLEŽITÉ: Otevřete si v prohlížeči vývojářské nástroje (F12 nebo pravé tlačítko -> Prozkoumat -> záložka Console). Zde uvidíte logy z aplikace.

🧪 Co si vyzkoušet?

Aplikace demonstruje tři hlavní scénáře. Sledujte konzoli při provádění těchto akcí:

1. Načtení stránky (Creation & Mounting)

Ihned po načtení stránky uvidíte v konzoli sérii zpráv:

beforeCreate
created (zde jsou už dostupná data)
beforeMount
mounted (zde je komponenta vidět na obrazovce)

2. Klikání na tlačítko "Přidat kliknutí" (Updating)

Když změníte data (clickCount), Vue musí překreslit část stránky.

Spustí se beforeUpdate.
Spustí se watch (protože sledujeme proměnnou clickCount).
Spustí se computed (pokud změna ovlivnila vypočítanou hodnotu).
Spustí se updated (DOM je překreslen).

3. Tlačítko "Skrýt/zobrazit Komponentu" (Destruction)

Toto tlačítko používá direktivu v-if. Pokud komponentu skryjete, Vue ji kompletně odstraní z paměti.

Spustí se beforeUnmount (čas na úklid).
Spustí se unmounted.
Když ji znovu zobrazíte, celý proces Creation & Mounting začne nanovo.

📚 Slovníček pojmů (Lifecycle Hooks)

Fáze	Hook	Kdy se spouští?	K čemu je dobrý?
Creation	`beforeCreate`	Úplný začátek, ještě neexistují data (`this.neco`).	Zřídka se používá.
	`created`	Data a metody jsou připraveny.	Volání API pro stažení dat.
Mounting	`beforeMount`	Těsně před vložením do HTML stránky.	Poslední úpravy před renderem.
	`mounted`	Komponenta je vložena do stránky (DOM).	Přístup k HTML elementům, grafy, timery.
Updating	`beforeUpdate`	Data se změnila, ale obrazovka ještě ne.	Debugování změn.
	`updated`	Obrazovka se překreslila podle nových dat.	Akce závislé na novém vzhledu DOMu.
Destruction	`beforeUnmount`	Těsně před zničením komponenty.	Úklid: zastavení timerů, odpojení listenerů.
	`unmounted`	Komponenta je pryč.	Hotovo.

🧠 Computed vs. Watch

Součástí dema jsou i ukázky pro computed a watch.

Computed (modMessage): Automaticky se přepočítá, když se změní message. Je efektivní, protože výsledek ukládá do mezipaměti.
Watch (clickCount): Sleduje proměnnou clickCount. Když se změní, spustí funkci (vypíše log, změní text, varuje při vysokém čísle).

3.1 KiB Raw Permalink Blame History