Reaktywność w Vue - Żywy Reaktor Plazmowy

Witaj w Reaktorze Plazmowym NOVA LAB! Dr. Nova mówi: tu czujniki ożywają - tak jak dane w Vue stają się reaktywne i automatycznie aktualizują interfejs kontrolny. Każdy odczyt mocy, temperatury czy ciśnienia jest natychmiast widoczny na panelach.

Czym jest Reaktywność?

Reaktywność to system, który automatycznie śledzi zmiany danych i aktualizuje DOM. Kiedy zmieniasz wartość - jak poziom mocy reaktora - Vue "wie" i odświeża widok na panelu kontrolnym.

1<template>
2  <div class="reactor-panel" style="background: #0a0e27; color: #00ff88;">
3    <p>Status: {{ reactorStatus }}</p>
4    <button @click="changeStatus">Zmień status</button>
5  </div>
6</template>
7
8<script setup>
9import { ref } from 'vue'
10
11const reactorStatus = ref('STANDBY')
12
13function changeStatus() {
14  reactorStatus.value = 'ACTIVE'
15  // Vue automatycznie zaktualizuje panel kontrolny!
16}
17</script>

ref() - Reaktywny Czujnik

ref()

tworzy reaktywne "opakowanie" dla wartości - jak czujnik reaktora monitorujący parametry:

1import { ref } from 'vue'
2
3// Dla prymitywów - pojedyncze odczyty
4const powerLevel = ref(0)
5const statusMessage = ref('System initializing...')
6const isOnline = ref(true)
7
8// Dla obiektów (też działa) - kompleksowe dane sensora
9const reactor = ref({
10  name: 'Plasma Core Alpha',
11  temperature: 2500
12})
13
14// Dostęp do wartości - używaj .value
15console.log(powerLevel.value) // 0
16powerLevel.value++
17console.log(powerLevel.value) // 1
18
19// W template - bez .value!
20// {{ powerLevel }} - Vue robi to automatycznie

Dlaczego .value?

Vue używa Proxy do śledzenia zmian.

ref()

opakowuje wartość w obiekt z właściwością

.value

- jak czujnik pakujący surowe dane do transmisji:

1const powerLevel = ref(0)
2
3// Pod spodem:
4// powerLevel = { value: 0 }
5
6// Zmiana wartości
7powerLevel.value = 75 // Proxy wykrywa zmianę → aktualizacja panelu

Typowanie ref (TypeScript)

1import { ref } from 'vue'
2import type { Ref } from 'vue'
3
4// Automatyczne wnioskowanie typu
5const temperature = ref(0) // Ref<number>
6const sensorName = ref('Temperature Alpha') // Ref<string>
7
8// Jawne typowanie
9const missionYear: Ref<number> = ref(2087)
10
11// Dla złożonych typów
12interface Sensor {
13  name: string
14  unit: string
15  maxValue: number
16}
17
18const temperatureSensor = ref<Sensor>({
19  name: 'Plasma Core Temperature',
20  unit: 'Kelvin',
21  maxValue: 5000
22})