Debugowanie Reaktywności

Nawet najlepsi inżynierowie NOVA LAB muszą czasem debugować swoje systemy. Poznaj narzędzia do debugowania reaktywności.

isRef() i isReactive()

1import { ref, reactive, isRef, isReactive } from 'vue'
2
3const powerLevel = ref(0)
4const reactor = reactive({ name: 'Plasma Core Alpha' })
5const plainConfig = { mode: 'safe' }
6
7console.log(isRef(powerLevel))       // true
8console.log(isRef(reactor))     // false
9console.log(isReactive(reactor)) // true
10console.log(isReactive(powerLevel))   // false
11console.log(isReactive(plainConfig)) // false

unref() - Bezpieczne Rozpakowanie Odczytu

1import { ref, unref } from 'vue'
2
3const temperature = ref(2500)
4const plainReading = 1500
5
6// unref zwraca .value dla ref, lub wartość bezpośrednio
7console.log(unref(temperature))      // 2500
8console.log(unref(plainReading)) // 1500
9
10// Przydatne w funkcjach uniwersalnych
11function convertToFahrenheit(kelvin) {
12  return (unref(kelvin) - 273.15) * 9/5 + 32
13}
14
15convertToFahrenheit(temperature)      // 4040.33
16convertToFahrenheit(plainReading) // 2240.33

toRaw() - Surowy Obiekt Sensora

1import { reactive, toRaw } from 'vue'
2
3const reactor = reactive({
4  name: 'Plasma Core Alpha',
5  temperature: 2500
6})
7
8const rawReactor = toRaw(reactor)
9console.log(rawReactor) // Oryginalny obiekt bez Proxy
10
11// Przydatne do:
12// - Porównywania obiektów
13// - Wysyłania do API misji (unikanie serializacji Proxy)
14// - Bibliotek zewnętrznych

markRaw() - Wyłączenie Reaktywności

1import { reactive, markRaw } from 'vue'
2
3const externalSensorLibrary = markRaw({
4  hardwareInterface: new Map(),
5  calibrate() { /* ... */ }
6})
7
8const state = reactive({
9  sensor: externalSensorLibrary // Nie będzie reaktywny
10})
11
12// Przydatne dla:
13// - Bibliotek sprzętowych (sensor drivers, hardware interfaces)
14// - Dużych niezmiennych danych z bazy NOVA LAB
15// - Obiektów z cyklicznymi referencjami

Debugging z watch

1import { ref, watch } from 'vue'
2
3const count = ref(0)
4
5watch(count, (newValue, oldValue) => {
6  console.log(`count changed: ${oldValue} → ${newValue}`)
7  console.trace() // Stack trace - skąd przyszła zmiana?
8}, { immediate: true })

Vue DevTools

W Vue DevTools możesz:

• Zobaczyć wszystkie reaktywne dane
• Śledzić zmiany w czasie rzeczywistym
• Edytować wartości na żywo
• Zobaczyć drzewo zależności