Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить reactive()?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`reactive()`** - це функція з Composition API (Vue 3), яка робить об'єкт (або масив) повністю реактивним, перетворюючи його на Proxy, який відстежує читання і зміну властивостей. **Ключове:** на відміну від `ref`, `reactive()` не вимагає `.value`, але не дозволяє замінювати об'єкт цілком.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`reactive()` - це функція з Composition API (Vue 3), яка робить **об'єкт (або масив) повністю реактивним**, перетворюючи його на **Proxy**, який відстежує читання і зміну властивостей. Простіше кажучи: > `reactive()` **робить об'єкт "живим": Vue стежить за всіма його полями і оновлює інтерфейс при їх зміні.** Це основний інструмент реактивності для **об'єктів, масивів, Map, Set** та складних структур даних. --- ## Як виглядає reactive() ```js import { reactive } from 'vue' const user = reactive({ name: 'Alex', age: 25 }) ``` Тепер Vue стежить за **всіма** властивостями об'єкта: `name`, `age`, а також вкладеними об'єктами. --- ## Як працювати з reactive? #### Читання: ```js console.log(user.name) ``` #### Зміна: ```js user.age = 30 ``` Vue побачить зміну і оновить UI. --- ## Приклад у компоненті ```vue <script setup> import { reactive } from 'vue' const form = reactive({ name: '', email: '' }) </script> <template> <input v-model="form.name"> <input v-model="form.email"> <p>{{ form.name }} - {{ form.email }}</p> </template> ``` --- ## Коли використовувати reactive()? #### 1. Коли потрібно зберігати **кілька полів** Форми, складні об'єкти: ```js const form = reactive({ name: '', email: '', age: null }) ``` #### 2. Коли дані мають **вкладену структуру** ```js const profile = reactive({ address: { city: '', street: '' } }) ``` #### 3. Коли потрібні реактивні колекції Працює з: - Object - Array - Map - Set --- ## Важливі особливості reactive() ### 1. **Не потрібно звертатися через** `.value` На відміну від `ref`: ```js user.name = 'John' // правильно ``` ### 2. **Не деструктурувати напряму** Втрата реактивності: ```js const { name } = user // реактивність втрачена ``` Правильно: ```js import { toRefs } from 'vue' const { name } = toRefs(user) // реактивні властивості ``` ### 3. **Не можна замінити об'єкт цілком** Ось так - втрата реактивності: ```js user = { name: 'New' } // не можна ``` Можна лише змінювати властивості: ```js Object.assign(user, { name: 'New' }) // правильно ``` --- ## Чим reactive відрізняється від ref? | Характеристика | ref | reactive | |---|---|---| | Тип | будь-яке значення | лише об'єкт/масив | | Доступ | `.value` | як звичайний об'єкт | | Заміна | можна замінити повністю | не можна замінити об'єкт | | Прості типи | потрібен | не підходить | | Вкладені структури | немає проксі за замовчуванням | глибока реактивність | --- ## Приклад: reactive для масиву ```js const items = reactive([1, 2, 3]) items.push(4) // реактивно items[0] = 10 // реактивно ``` --- ## Підсумок (ідеально для співбесіди) > `reactive()` **- це функція Composition API, яка перетворює об'єкт, масив або колекцію на реактивний Proxy.** > **Vue відстежує зміни всіх властивостей, включно з вкладеними.** > **Використовується для форм, складних об'єктів і структур даних.** > **На відміну від** `ref`**, не вимагає** `.value`**, але не дозволяє замінювати об'єкт цілком.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.