Reactivity in Vue - The Living Plasma Reactor

Welcome to the NOVA LAB Plasma Reactor! Dr. Nova says: here sensors come alive - just as data in Vue becomes reactive and automatically updates the control interface. Every power, temperature, or pressure reading is instantly visible on the panels.

What is Reactivity?

Reactivity is a system that automatically tracks data changes and updates the DOM. When you change a value - like the reactor's power level - Vue "knows" and refreshes the view on the control panel.

1<template>
2  <div class="reactor-panel" style="background: #0a0e27; color: #00ff88;">
3    <p>Status: {{ reactorStatus }}</p>
4    <button @click="changeStatus">Change 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 will automatically update the control panel!
16}
17</script>

ref() - Reactive Sensor

ref()

creates a reactive "wrapper" for a value - like a reactor sensor monitoring parameters:

1import { ref } from 'vue'
2
3// For primitives - single readings
4const powerLevel = ref(0)
5const statusMessage = ref('System initializing...')
6const isOnline = ref(true)
7
8// For objects (also works) - complex sensor data
9const reactor = ref({
10  name: 'Plasma Core Alpha',
11  temperature: 2500
12})
13
14// Accessing the value - use .value
15console.log(powerLevel.value) // 0
16powerLevel.value++
17console.log(powerLevel.value) // 1
18
19// In template - no .value needed!
20// {{ powerLevel }} - Vue does this automatically

Why .value?

Vue uses Proxy to track changes.

ref()

wraps the value in an object with a

.value

property - like a sensor packaging raw data for transmission:

1const powerLevel = ref(0)
2
3// Under the hood:
4// powerLevel = { value: 0 }
5
6// Changing the value
7powerLevel.value = 75 // Proxy detects change → panel update

Typing ref (TypeScript)

1import { ref } from 'vue'
2import type { Ref } from 'vue'
3
4// Automatic type inference
5const temperature = ref(0) // Ref<number>
6const sensorName = ref('Temperature Alpha') // Ref<string>
7
8// Explicit typing
9const missionYear: Ref<number> = ref(2087)
10
11// For complex types
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})