---
title: "Reactivity Radar · vuejs.school"
description: "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."
canonical_url: "https://vuejs.school/games/radar"
meta:
  "og:description": "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."
  "og:image": "https://vuejs.school/_og/d/a_~UmVhY3Rpdml0eSBSYWRhciDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Reactivity%2BRadar%2Cdescription_~V2lsbCB0aGUgdGVtcGxhdGUgdXBkYXRlPyBDYWxsIGl0IGJlZm9yZSBWdWUgZG9lcy4%2Ceyebrow_~R2FtZXMgwrcgUHJlZGljdGlvbiBnYW1l%2Ctint_mint%2Cp_Ii9nYW1lcy9yYWRhciI%2Cs_5x-YYzaTcQybmYEt.png"
  "og:image:alt": "Reactivity Radar · vuejs.school"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Reactivity Radar · vuejs.school"
  "twitter:image": "https://vuejs.school/_og/d/a_~UmVhY3Rpdml0eSBSYWRhciDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_Reactivity%2BRadar%2Cdescription_~V2lsbCB0aGUgdGVtcGxhdGUgdXBkYXRlPyBDYWxsIGl0IGJlZm9yZSBWdWUgZG9lcy4%2Ceyebrow_~R2FtZXMgwrcgUHJlZGljdGlvbiBnYW1l%2Ctint_mint%2Cp_Ii9nYW1lcy9yYWRhciI%2Cs_5x-YYzaTcQybmYEt.png"
  "twitter:image:alt": "Reactivity Radar · vuejs.school"
---

> Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt)

**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.

[**Start level 1**](https://vuejs.school/games/radar/1)

1. **1****Read the snippet.** A short script setup, one value in the template and one button.
2. **2****Call it.** Does the click re-render the page, or does it stay stale? Pick before Vue tells you.
3. **3****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**+1****Level 1 of 3****Refs and reactive**

  The basics: what Vue tracks, and the copies it cannot see.**ref, reactive, computed and destructuring****8 rounds**Up next**Play** Play: Level 1, Refs and reactive, teaches ref, reactive, computed and destructuring, up next](https://vuejs.school/games/radar/1)
- [**Preview**

  \[ \]**Add****Level 2 of 3****Arrays and objects**

  Pushes, index writes, Sets, snapshots and the raw object behind a proxy.**collections, nested state and raw objects****8 rounds**Not started**Play** Play: Level 2, Arrays and objects, teaches collections, nested state and raw objects, not started](https://vuejs.school/games/radar/2)
- [**Preview**

  { }**Toggle****Level 3 of 3****Shallow and readonly**

  The escape hatches: when Vue tracks only the surface, and how to trigger by hand.**shallowRef, shallowReactive, readonly, markRaw and triggerRef****8 rounds**Not started**Play** Play: Level 3, Shallow and readonly, teaches shallowRef, shallowReactive, readonly, markRaw and triggerRef, not started](https://vuejs.school/games/radar/3)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://vuejs.school/#website","@type":"WebSite","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school/","publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/games/radar#webpage","@type":"WebPage","description":"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.","name":"Reactivity Radar","url":"https://vuejs.school/games/radar","isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/games/radar"]}],"primaryImageOfPage":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#identity","@type":"Organization","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school","logo":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#logo","@type":"ImageObject","caption":"vuejs.school","contentUrl":"https://vuejs.school/apple-touch-icon.png","inLanguage":"en","url":"https://vuejs.school/apple-touch-icon.png"}]}
```