Lifecycle Hooks - Cykl Życia Komponentu

Dr. Nova wyjaśnia: "Każdy moduł stacji NOVA LAB przechodzi przez fazy: instalację, uruchomienie, aktualizacje firmware'u i ostatecznie demontaż. Komponenty Vue mają identyczny cykl życia - i możesz wykonywać kod w każdej z tych faz!"

Fazy Cyklu Życia Komponentu

Komponent Vue przechodzi przez kilka kluczowych faz:

1. Tworzenie (Creation) - komponent jest inicjalizowany, reaktywny stan jest konfigurowany
2. Montowanie (Mounting) - komponent jest wstawiany do DOM (staje się widoczny na stronie)
3. Aktualizacja (Updating) - reaktywne dane się zmieniają, DOM jest aktualizowany
4. Odmontowanie (Unmounting) - komponent jest usuwany z DOM

W każdej fazie możesz uruchomić kod za pomocą lifecycle hooks - specjalnych funkcji wywoływanych automatycznie przez Vue.

onBeforeMount i onMounted

onMounted

to najczęściej używany hook. Uruchamia się po tym, jak komponent został wstawiony do DOM:

1<template>
2  <div class="module-status">
3    <p>Status: {{ status }}</p>
4    <p>Dane: {{ data }}</p>
5  </div>
6</template>
7
8<script setup>
9import { ref, onBeforeMount, onMounted } from 'vue'
10
11const status = ref('Inicjalizacja...')
12const data = ref(null)
13
14// Przed zamontowaniem - DOM jeszcze nie istnieje
15onBeforeMount(() => {
16  console.log('Komponent zaraz się zamontuje')
17  status.value = 'Montowanie...'
18})
19
20// Po zamontowaniu - DOM jest gotowy!
21onMounted(() => {
22  console.log('Komponent zamontowany w DOM')
23  status.value = 'Aktywny'
24
25  // Typowe zastosowanie: pobieranie danych z API
26  fetchModuleData()
27})
28
29async function fetchModuleData() {
30  const response = await fetch('/api/modules')
31  data.value = await response.json()
32}
33</script>

Kiedy używać

onMounted

:

• Pobieranie danych z API (fetch data)
• Dostęp do elementów DOM (

  document.querySelector

  , referencje)
• Inicjalizacja bibliotek zewnętrznych (np. wykresy, mapy)
• Uruchamianie timerów i interwałów

onBeforeUnmount i onUnmounted

Te hooki uruchamiają się, gdy komponent jest usuwany z DOM. Służą do czyszczenia zasobów:

1<script setup>
2import { ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
3
4const timer = ref(null)
5const seconds = ref(0)
6
7onMounted(() => {
8  // Uruchamiamy timer po zamontowaniu
9  timer.value = setInterval(() => {
10    seconds.value++
11  }, 1000)
12  console.log('Timer uruchomiony')
13})
14
15onBeforeUnmount(() => {
16  // Przed odmontowaniem - komponent jeszcze jest w DOM
17  console.log('Komponent zaraz zostanie usunięty')
18})
19
20onUnmounted(() => {
21  // Czyścimy timer, żeby nie działał po usunięciu komponentu!
22  if (timer.value) {
23    clearInterval(timer.value)
24    console.log('Timer wyczyszczony')
25  }
26})
27</script>

Dlaczego czyszczenie jest ważne? Jeśli nie wyczyścisz

setInterval

, timer będzie działał nawet po usunięciu komponentu z DOM, powodując wycieki pamięci (memory leaks).

onBeforeUpdate i onUpdated

Te hooki reagują na zmiany reaktywnych danych i aktualizację DOM:

1<script setup>
2import { ref, onBeforeUpdate, onUpdated } from 'vue'
3
4const count = ref(0)
5
6onBeforeUpdate(() => {
7  // Przed aktualizacją DOM
8  console.log('DOM zaraz się zaktualizuje')
9})
10
11onUpdated(() => {
12  // Po aktualizacji DOM
13  console.log('DOM zaktualizowany, nowa wartość:', count.value)
14})
15</script>

Te hooki są rzadziej używane - przydają się gdy musisz zareagować na zmiany w DOM (np. scroll position, animacje).

Praktyczny Przykład: Moduł z Danymi i Timerem

1<template>
2  <div class="station-module" style="background: #0a0e27; color: #00ff88; padding: 1rem;">
3    <h3>Moduł: {{ moduleName }}</h3>
4    <p>Czas pracy: {{ uptime }}s</p>
5    <p>Status: {{ status }}</p>
6    <ul>
7      <li v-for="log in logs" :key="log">{{ log }}</li>
8    </ul>
9  </div>
10</template>
11
12<script setup>
13import { ref, onMounted, onUnmounted } from 'vue'
14
15const moduleName = ref('Oxygen Generator')
16const uptime = ref(0)
17const status = ref('Uruchamianie...')
18const logs = ref([])
19let intervalId = null
20
21onMounted(() => {
22  logs.value.push('System zamontowany')
23  status.value = 'Aktywny'
24
25  // Timer aktualizujący uptime co sekundę
26  intervalId = setInterval(() => {
27    uptime.value++
28  }, 1000)
29
30  logs.value.push('Timer uruchomiony')
31})
32
33onUnmounted(() => {
34  // Czyszczenie przy odmontowaniu
35  if (intervalId) {
36    clearInterval(intervalId)
37  }
38  console.log('Moduł wyłączony, zasoby zwolnione')
39})
40</script>

Kolejność Hooków - Podsumowanie

1Tworzenie:      setup() → onBeforeMount → onMounted
2Aktualizacja:   onBeforeUpdate → onUpdated
3Odmontowanie:   onBeforeUnmount → onUnmounted

Zapamiętaj dwa najważniejsze:

• onMounted

  - pobieranie danych, inicjalizacja (start)

• onUnmounted

  - czyszczenie timerów, listenerów (cleanup)