Як працює реактивність у Vue.js?

Що таке Реактивність?

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

Як це працює?

Vue відстежує зміни в реактивних змінних.
Коли значення змінюється, компоненти, що залежать від нього, автоматично повторно рендеряться.
ref() та reactive() використовуються для роботи з реактивними даними.

ref()

ref() використовується для створення реактивних значень. Він підходить для роботи з примітивами (числа, рядки, булеві значення) та об'єктами.

Приклад використання ref()

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

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

count = ref(0); — створити реактивне значення count, яке дорівнює 0.
count.value++ — оскільки ref() вимагає доступу через .value, ми інкрементуємо значення count таким чином.
Коли count.value змінюється, Vue автоматично оновлює шаблон (template).

reactive()

reactive() використовується для створення реактивних об'єктів та масивів.

Приклад використання reactive()

<script setup>
import { reactive } from 'vue';

const state = reactive({ count: 0 });

const increment = () => {
  state.count++;
};
</script>

state = reactive({ count: 0 }); — створити об'єкт state з реактивною властивістю count.
state.count++ — інкрементувати значення count без .value, оскільки reactive() працює безпосередньо з об'єктами.
Vue автоматично відстежує зміни та оновлює інтерфейс.

Відмінність між ref() та reactive()

Критерій	ref()	reactive()
Підтримка примітивів	Так	Ні
Підтримка об'єктів	Так	Так
Доступ до значення	Через `.value`	Прямий доступ
Глибока реактивність	Так	Так
Зміна структури	Легка (можна призначити нове значення)	Ні (структура фіксована)

Коли використовувати?

ref() — якщо потрібно працювати з примітивами.
reactive() — якщо потрібно створити реактивний об'єкт.
Комбінація — можна використовувати ref() всередині reactive(), якщо потрібно зберігати примітивні значення в реактивному об'єкті.

Приклад комбінованого підходу:

<script setup>
import { reactive, ref } from 'vue';

const state = reactive({
  count: ref(0)
});

const increment = () => {
  state.count.value++;
};
</script>

state = reactive({ count: ref(0) }); — об'єкт state містить реактивне значення count, створене через ref().
state.count.value++ — доступ до ref() всередині reactive() вимагає .value.
Цей підхід зручний, якщо частина даних в об'єкті повинна бути примітивами з можливістю призначення нового значення.

Підсумок

Vue.js надає два потужні механізми для роботи з реактивними даними:

ref() — для примітивних значень та об'єктів з доступом через .value.
reactive() — для роботи з об'єктами та масивами без .value.

Обидва методи можуть бути комбіновані в залежності від вимог проекту. Вибір залежить від структури даних та зручності роботи з ними.

Зміст

Що таке Реактивність?ref()reactive()Відмінність між ref() та reactive()Підсумок

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Як працює реактивність у Vue.js?

#Що таке Реактивність?

#ref()

#reactive()

#Відмінність між ref() та reactive()

#Підсумок

#Зміст