update 12

vue/12_lifecycle/lifecyles/README.md

@@ -1,24 +1,71 @@
-# lifecyles
+# Vue.js Lifecycle Hooks Demo 🔄
 
-## Project setup
-```
+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
     ```
 
-### Compiles and hot-reloads for development
-```
+2.  **Spusťte vývojový server:**
+    ```bash
     npm run serve
     ```
 
-### Compiles and minifies for production
-```
-npm run build
-```
+3.  **Otevřete aplikaci:**
+    Klikněte na odkaz v terminálu (obvykle `http://localhost:8080`).
 
-### Lints and fixes files
-```
-npm run lint
-```
+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`.
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+*   **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).

vue/12_lifecycle/lifecyles/src/components/LifeCycle.vue

@@ -24,6 +24,13 @@ export default{
             showComponent: true
         }
     },
+    /*
+      COMPUTED PROPERTIES (Počítané vlastnosti)
+      - Používají se pro logiku, která závisí na jiných datech.
+      - Jsou CACHOVANÉ (ukládají se do mezipaměti) -> přepočítají se jen tehdy,
+        když se změní závislost (v tomto případě 'this.message').
+      - Ideální pro filtrování seznamů, formátování textu atd.
+    */
     computed:{
         modMessage(){
             console.log("Computed: modMessage se přepočítává")
@@ -38,6 +45,12 @@ export default{
             this.showComponent = !this.showComponent
         }
     },
+    /*
+      WATCHERS (Sledovače)
+      - Reagují na změnu konkrétní proměnné.
+      - Na rozdíl od computed properties nevrací hodnotu, ale spouští "vedlejší efekty" (side effects).
+      - Ideální pro: asynchronní operace (API volání po změně vstupu), logování, nastavování timerů.
+    */
     watch: {
         clickCount(newValue,oldValue) {
             console.log(`watch: clickCount se změnil z ${oldValue} na ${newValue}`)
@@ -48,26 +61,57 @@ export default{
             }
         }
     },
+    
+    // --- LIFECYCLE HOOKS (Životní cyklus komponenty) ---
+
+    /*
+      1. CREATION (Vytváření)
+      - Tyto hooky běží jako první při inicializaci komponenty.
+      - Nemají ještě přístup k DOMu (HTML elementům).
+    */
     beforeCreate(){
-        console.log("beforeCreate: Instance se inicialiuzuje, data a events nejsou ještě dostupné")
+        // Zde ještě neexistují 'data' ani 'methods'.
+        console.log("beforeCreate: Instance se inicializuje, data a events nejsou ještě dostupné")
     },
     created(){
-        console.log("created: Instance je vytvoena, data a a events jsou dostupná (ale ne DOM)")
+        // Zde už máme přístup k 'this.data' a 'this.methods'.
+        // IDEÁLNÍ MÍSTO PRO: Načtení dat z API (pokud nepotřebujeme DOM).
+        console.log("created: Instance je vytvořena, data a events jsou dostupná (ale ne DOM)")
     },
+
+    /*
+      2. MOUNTING (Připojování)
+      - Komponenta se vykresluje do reálného DOMu prohlížeče.
+    */
     beforeMount(){
-        console.log("beforeMount: Template je zkomplován ale není ještě v DOMu")
+        console.log("beforeMount: Template je zkompilován, ale není ještě v DOMu")
     },
     mounted(){
+        // Komponenta je plně viditelná a interaktivní.
+        // IDEÁLNÍ MÍSTO PRO: Přímou manipulaci s DOMem, nastavení intervalů, použití knihoven třetích stran.
         console.log("mounted: Komponenta je v DOMu")
         document.title = "Vue Lifecycle Demo"
     },
+
+    /*
+      3. UPDATING (Aktualizace)
+      - Spouští se, když se změní reaktivní data (např. clickCount) a komponenta se musí překreslit.
+    */
     beforeUpdate() {
+        // Můžeme číst starý stav DOMu před změnou.
         console.log("beforeUpdate: Data se měnila, DOM se bude překreslovat")
     },
     updated(){
+        // DOM je aktualizován. Pozor: Zde neměňte data, jinak byste mohli vytvořit nekonečnou smyčku!
         console.log("updated: DOM byl překreslen")
     },
+
+    /*
+      4. UNMOUNTING (Odstraňování - Destruction)
+      - Spouští se, když komponenta mizí ze stránky (např. pomocí v-if="false" nebo přechodem na jinou stránku).
+    */
     beforeUnmount() {
+        // IDEÁLNÍ MÍSTO PRO: Úklid (cleanup). Zastavení intervalů, odstranění event listenerů z window/document.
         console.log("beforeUnmount: Komponenta se bude odstraňovat.")
     },
     unmounted(){