Що означає реактивність стану?

VueJunior~1 хв читання

Реактивність стану означає, що Vue автоматично відстежує зміни даних і перемальовує інтерфейс, коли ці дані змінюються.

Якщо якесь значення змінилося - Vue сам оновить усе, що від нього залежить. Тобі не потрібно вручну оновлювати DOM.

Простий приклад реактивності

javascript

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

const count = ref(0)
</script>

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

Коли ти натискаєш кнопку і count++ збільшує число - Vue:

помічає зміну
обчислює, які частини шаблону залежать від count
перемальовує лише цю частину

Усі інші елементи залишаються незмінними - це швидко й ефективно.

Що відбувається всередині?

Реактивність у Vue працює так:

Ти створюєш змінну через ref() або reactive() (або в data()).
Vue робить її "спостережуваною" - відстежує читання/запис.
Коли значення змінюється - Vue запускає механізм оновлення.
Компонент перемальовується лише там, де використовувалося це значення.

Vue вибудовує зв'язки між:

станом,
шаблоном,
обчислюваними властивостями,
ефектами (watch, watchEffect).

Ці зв'язки створюються автоматично.

Приклад: реактивність об'єкта

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++">Старший</button>
</template>