Suggest an edit

Improve this article

Refine the answer for “What does state reactivity mean?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**State reactivity** means that Vue automatically tracks data changes and **re-renders the interface** when that data changes.

**If some value changes, Vue itself updates everything that depends on it.**
You don't need to update the DOM manually.

---

## A simple example of reactivity

```javascript
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    {{ count }}
  </button>
</template>
```

When you click the button and `count++` increases the number, Vue:

1. notices the change
2. calculates which parts of the template depend on `count`
3. re-renders only that part

All other elements remain untouched - this is fast and efficient.

---

## What happens under the hood?

Reactivity in Vue works like this:

1. You create a variable via `ref()` or `reactive()` (or in `data()`).
2. Vue makes it "observable" - it tracks reads and writes.
3. When the value changes, Vue triggers the update mechanism.
4. The component re-renders only where that value was used.

Vue builds links between:

- state,
- the template,
- computed properties,
- effects (watch, watchEffect).

These links are created automatically.

---

## Example: reactivity of an object

```javascript
<script setup>
import { reactive } from 'vue'

const user = reactive({
  name: 'Tim',
  age: 25
})
</script>

<template>
  <p>{{ user.name }} ({{ user.age }})</p>
  <button @click="user.age++">Older</button>
</template>
```

When the age increases, Vue updates only the text `25` -> `26`.

---

## What makes reactivity convenient?

#### No need to change the DOM manually

JS changes the data -> Vue changes the HTML itself.

#### The template always reflects the current state

The UI never "drifts apart" from the data.

#### Re-rendering only where needed

Vue re-renders only the affected areas - this is fast.

#### Convenient for building complex dependencies

For example, `computed` recalculates only when the dependent data changes.

---

## Summary (short)

**Reactivity is Vue's ability to automatically update the user interface when the state changes.**

- change `ref` / `reactive` / `data()` -> the UI updates
- only the necessary areas update
- reactivity provides simplicity, predictability, and high performance

Markdown · drag & drop images · ⌘B / ⌘I shortcuts348 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.