Debugging Reactivity

Even the best NOVA LAB engineers sometimes need to debug their systems. Learn the tools for debugging reactivity.

isRef() and 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() - Safe Reading Unpacking

1import { ref, unref } from 'vue'
2
3const temperature = ref(2500)
4const plainReading = 1500
5
6// unref returns .value for ref, or the value directly
7console.log(unref(temperature))      // 2500
8console.log(unref(plainReading)) // 1500
9
10// Useful in universal functions
11function convertToFahrenheit(kelvin) {
12  return (unref(kelvin) - 273.15) * 9/5 + 32
13}
14
15convertToFahrenheit(temperature)      // 4040.33
16convertToFahrenheit(plainReading) // 2240.33

toRaw() - Raw Sensor Object

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) // Original object without Proxy
10
11// Useful for:
12// - Comparing objects
13// - Sending to the mission API (avoiding Proxy serialization)
14// - External libraries

markRaw() - Disabling Reactivity

1import { reactive, markRaw } from 'vue'
2
3const externalSensorLibrary = markRaw({
4  hardwareInterface: new Map(),
5  calibrate() { /* ... */ }
6})
7
8const state = reactive({
9  sensor: externalSensorLibrary // Will not be reactive
10})
11
12// Useful for:
13// - Hardware libraries (sensor drivers, hardware interfaces)
14// - Large immutable data from the NOVA LAB database
15// - Objects with circular references

Debugging with 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 - where did the change come from?
8}, { immediate: true })

Vue DevTools

In Vue DevTools you can:

• See all reactive data
• Track changes in real time
• Edit values live
• See the dependency tree