Reactive systems / 02

Dependency
Tracking

Vue remembers which effects read a piece of state, then wakes only those effects when the state changes.

Reactivityintermediate

INTERACTIVE MODEL ● READY

inputstate

processtrack

outputeffect

simulator idle

01 / GET THE FEEL

The real-world analogy

Think of a small newsroom. Each reporter subscribes to the desks they need. When a desk updates, only the right reporters get the memo.

The editable example

Start with the smallest useful shape. Change a line, then compare it with the visual model above.

DependencyTracking.vueEDITABLE

0102030405060708091011

client-side example

What this teachesLIVE MODEL

state → effect

computed 0

Edit the starter on the left. This preview is intentionally tiny so the relationship stays clear.

The sequence

01A render reads count

02Vue records the active effect

03count changes

04Vue triggers the subscribers

05The component updates

Watch for these

Expecting every component to update

Mutating a non-reactive copy

Destructuring reactive state too early

Performance note

Tracking keeps work local. The win is not that Vue never renders — it is that Vue can identify what is worth rendering.