What does state reactivity mean?

VueJunior~1 min read

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:

notices the change
calculates which parts of the template depend on count
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:

You create a variable via ref() or reactive() (or in data()).
Vue makes it "observable" - it tracks reads and writes.
When the value changes, Vue triggers the update mechanism.
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>