Project: Reactive NOVA LAB Control Panel

Final project of the Power Reactor module! Combine all Vue.js reactivity techniques in a single monitoring system. You'll build a complete plasma reactor dashboard that tracks parameters in real time, generates alarms, and optimizes resource usage.

Module Summary

In this module you learned:

• ref() - reactive primitive variables. Access via

  .value

  in scripts, automatic unwrap in template. Ideal for single values like temperature, status, counter.
• reactive() - reactive objects and arrays. Direct property access without

  .value

  . Cannot replace the entire object (only properties). Don't destructure without toRefs!
• Deep vs shallow reactivity -

  shallowRef

  and

  shallowReactive

  track changes only at the first level.

  markRaw

  completely disables reactivity. Useful for large API data and external libraries.
• toRef / toRefs - safe destructuring of reactive objects while preserving reactivity.

  toRef(obj, 'key')

  for a single property,

  toRefs(obj)

  for all.
• Debugging tools -

  isRef()

  ,

  isReactive()

  ,

  unref()

  ,

  toRaw()

  for checking and unwrapping reactive values.
• Practical patterns - panels with validation, filtering systems, shopping carts with computed getters.

Project Requirements

Build a Reactor Monitoring System that includes:

1. Reactor state with reactive()

Create a reactive object holding reactor data: temperature (Kelvin), pressure (kPa), energy level (%), status (ACTIVE/STANDBY/CRITICAL). Add buttons to modify values.

2. Alarms with ref()

Use

ref([])

to store a list of system alarms. When temperature exceeds 4000K or pressure drops below 50kPa, automatically add an alarm to the list. Display alerts with the ability to dismiss them.

3. Safe destructuring with toRefs

Use

toRefs

to extract individual values from the reactor object. Display them in separate interface components/sections without losing reactivity.

4. Optimization with markRaw

Create an array of historical readings and mark it as

markRaw

to avoid burdening the reactivity system. Display the last 10 readings in a history panel.

Expand the starter below!