Projekt: Reaktywny Panel Kontrolny NOVA LAB

Finalny projekt modulu Reaktora Energetycznego! Polacz wszystkie techniki reaktywnosci Vue.js w jednym systemie monitorowania. Zbudujesz kompletny dashboard reaktora plazmowego, ktory w czasie rzeczywistym sledzi parametry, generuje alarmy i optymalizuje zuzycie zasobow.

Podsumowanie modulu

W tym module poznales:

• ref() — reaktywne zmienne prymitywne. Dostep przez

  .value

  w skryptach, automatyczny unwrap w template. Idealne dla pojedynczych wartosci jak temperatura, status, licznik.
• reactive() — reaktywne obiekty i tablice. Bezposredni dostep do wlasciwosci bez

  .value

  . Nie mozna zastapic calego obiektu (tylko wlasciwosci). Nie destructure bez toRefs!
• Gleboka vs plytka reaktywnosc —

  shallowRef

  i

  shallowReactive

  sledza zmiany tylko na pierwszym poziomie.

  markRaw

  calkowicie wylacza reaktywnosc. Przydatne dla duzych danych z API i bibliotek zewnetrznych.
• toRef / toRefs — bezpieczna destrukturyzacja obiektow reaktywnych z zachowaniem reaktywnosci.

  toRef(obj, 'key')

  dla pojedynczej wlasciwosci,

  toRefs(obj)

  dla wszystkich.
• Narzedzia debugowania —

  isRef()

  ,

  isReactive()

  ,

  unref()

  ,

  toRaw()

  do sprawdzania i rozpakowywania reaktywnych wartosci.
• Praktyczne wzorce — panele z walidacja, systemy filtrowania, koszyki zakupow z computed getters.

Wymagania projektu

Zbuduj System Monitorowania Reaktora ktory zawiera:

1. Stan reaktora z reactive()

Stworz obiekt reaktywny przechowujacy dane reaktora: temperature (Kelvin), cisnienie (kPa), poziom energii (%), status (ACTIVE/STANDBY/CRITICAL). Dodaj przyciski do modyfikowania wartosci.

2. Alarmy z ref()

Uzyj

ref([])

do przechowywania listy alarmow systemowych. Gdy temperatura przekroczy 4000K lub cisnienie spadnie ponizej 50kPa, automatycznie dodaj alarm do listy. Wyswietl alerty z mozliwoscia usuwania.

3. Bezpieczna destrukturyzacja z toRefs

Uzyj

toRefs

aby wyodrebnic poszczegolne wartosci z obiektu reaktora. Wyswietl je w osobnych komponentach/sekcjach interfejsu bez utraty reaktywnosci.

4. Optymalizacja z markRaw

Stworz tablice historycznych odczytow i oznacz ja jako

markRaw

, aby nie obciazac systemu reaktywnosci. Wyswietl ostatnie 10 odczytow w panelu historii.

Rozbuduj starter ponizej!