Reactive systems / 06

Computed
Properties

A computed value is a lazy, cached effect. It recalculates only when one of its reactive inputs has become stale.

Reactivityintermediate

INTERACTIVE MODEL ● READY

inputstate

processtrack

outputeffect

simulator idle

01 / GET THE FEEL

The real-world analogy

It is a carefully labeled jar in the fridge: you do not remake the smoothie every time someone asks for it — only after an ingredient changes.

The editable example

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

ComputedProperties.vueEDITABLE

01020304050607080910

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

01Read source state

02Cache the derived result

03Mark stale when a dependency changes

04Recompute on next read

05Share the cached value

Watch for these

Changing state inside a computed getter

Using a watcher for a pure derivation

Forgetting that it is lazy

Performance note

Computed properties are ideal for expensive, deterministic transformations. Keep getters pure so caching stays predictable.