Prediction game · 3 levels
Reactivity Radar
Will the template update? Call it before Vue does. Read a short script setup, predict whether a click updates the page, then watch Vue's real reactivity settle it. Refs, reactive, destructuring, shallow and readonly.
- Read the snippet. A short script setup, one value in the template and one button.
- Call it. Does the click re-render the page, or does it stay stale? Pick before Vue tells you.
- Watch Vue decide. The snippet runs with Vue's real reactivity. Get 6 of 8 right to pass a level.
Levels
0 of 3 done · play in order, or jump to any level- Preview
0
Level 1 of 3Refs and reactiveThe basics: what Vue tracks, and the copies it cannot see.
ref, reactive, computed and destructuring8 roundsUp nextPlay - Preview
[ ]
Level 2 of 3Arrays and objectsPushes, index writes, Sets, snapshots and the raw object behind a proxy.
collections, nested state and raw objects8 roundsNot startedPlay - Preview
{ }
Level 3 of 3Shallow and readonlyThe escape hatches: when Vue tracks only the surface, and how to trigger by hand.
shallowRef, shallowReactive, readonly, markRaw and triggerRef8 roundsNot startedPlay