# 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

1.  **Nainstalujte závislosti:**
    Otevřete terminál v této složce a spusťte:
    ```bash
    npm install
    ```

2.  **Spusťte vývojový server:**
    ```bash
    npm run serve
    ```

3.  **Otevřete aplikaci:**
    Klikněte na odkaz v terminálu (obvykle `http://localhost:8080`).

4.  **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).