Reactive

ELI5 — The Vibe Check

Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic. You don't have to manually tell the browser 'hey, go redraw that number'. The framework watches your data and handles it.

Real Talk

Reactive data is data that, when mutated, automatically triggers UI updates. In Vue, reactive() wraps an object in a Proxy that intercepts get/set operations to track dependencies and trigger re-renders. In React, reactive updates happen via setState calls.

Show Me The Code

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'vibecoder'
});

// Changing state.count automatically updates the template
state.count++;

When You'll Hear This

"Use reactive() for objects and ref() for primitives in Vue." / "The UI isn't updating because you replaced the reactive object instead of mutating it."