Що робить reactive()?

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

reactive() - це функція з Composition API (Vue 3), яка робить об'єкт (або масив) повністю реактивним, перетворюючи його на Proxy, який відстежує читання і зміну властивостей.

Простіше кажучи:

reactive() робить об'єкт "живим": Vue стежить за всіма його полями і оновлює інтерфейс при їх зміні.

Це основний інструмент реактивності для об'єктів, масивів, Map, Set та складних структур даних.

Як виглядає reactive()

import { reactive } from 'vue'

const user = reactive({
  name: 'Alex',
  age: 25
})

Тепер Vue стежить за всіма властивостями об'єкта: name, age, а також вкладеними об'єктами.

Як працювати з reactive?

Читання:

console.log(user.name)

Зміна:

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. Коли потрібно зберігати кілька полів

Форми, складні об'єкти:

const form = reactive({
  name: '',
  email: '',
  age: null
})

2. Коли дані мають вкладену структуру

const profile = reactive({
  address: {
    city: '',
    street: ''
  }
})

3. Коли потрібні реактивні колекції

Працює з:

Object
Array
Map
Set

Важливі особливості reactive()

1. Не потрібно звертатися через `.value`

На відміну від ref:

user.name = 'John' // правильно

2. Не деструктурувати напряму

Втрата реактивності:

const { name } = user  // реактивність втрачена

Правильно:

import { toRefs } from 'vue'
const { name } = toRefs(user)  // реактивні властивості

3. Не можна замінити об'єкт цілком

Ось так - втрата реактивності:

user = { name: 'New' } // не можна

Можна лише змінювати властивості:

Object.assign(user, { name: 'New' }) // правильно

Чим reactive відрізняється від ref?

Характеристика	ref	reactive
Тип	будь-яке значення	лише об'єкт/масив
Доступ	`.value`	як звичайний об'єкт
Заміна	можна замінити повністю	не можна замінити об'єкт
Прості типи	потрібен	не підходить
Вкладені структури	немає проксі за замовчуванням	глибока реактивність

Приклад: reactive для масиву

const items = reactive([1, 2, 3])

items.push(4)      // реактивно
items[0] = 10      // реактивно

Підсумок (ідеально для співбесіди)

reactive() - це функція Composition API, яка перетворює об'єкт, масив або колекцію на реактивний Proxy. Vue відстежує зміни всіх властивостей, включно з вкладеними. Використовується для форм, складних об'єктів і структур даних. На відміну від ref, не вимагає .value, але не дозволяє замінювати об'єкт цілком.

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

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

Premium

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