Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить `ref()`?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Що робить `ref()`

Функція `ref()` створює **реактивну обгортку (контейнер)** навколо будь-якого значення - **примітиву або об'єкта** -
і повертає об'єкт зі спеціальною властивістю `.value`.

```javascript
import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
```

Ключова ідея:

> `ref()` робить значення реактивним, поміщаючи його в об'єкт вигляду `{ value: ... }`.

Vue «стежить» за змінами `.value`,
і автоматично оновлює шаблон або ефекти, що залежать від цього значення.

---

## 2. Що робить `reactive()`

А от `reactive()` робить **об'єкт цілком реактивним** (через `Proxy`).

```javascript
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  user: { name: 'Tim' }
})

state.count++       // реактивно
state.user.name = 'Alex' // реактивно
```

Vue відстежує всі властивості об'єкта, вкладеність і операції з ними (`get`, `set`, `delete`, `push` тощо).

---

## 3. Головна відмінність

| Характеристика | `ref()` | `reactive()` |
|---|---|---|
| **Що робить реактивним** | Одне значення (зазвичай примітив) | Весь об'єкт |
| **Синтаксис** | `count.value` | `state.count` |
| **Працює з примітивами** | Так | Ні |
| **Працює з об'єктами** | Так (обгортає всередині `reactive()`) | Так |
| **Повертає** | Об'єкт `{ value: ... }` | Proxy-об'єкт |
| **Вкладені властивості** | Не реактивні (якщо всередині немає ref/reactive) | Автоматично реактивні |
| **Коли використовувати** | Просте значення, лічильники, булеві прапорці | Складні структури, об'єкти, масиви |
| **У шаблоні Vue** | `.value` не потрібен (автоматичне розпакування) | Звичайний доступ через крапки |

---

## 4. Візуально

```javascript
ref(0)
   ↓
{ value: 0 } → реактивне значення

reactive({ count: 0 })
   ↓
Proxy({ count: 0 }) → реактивний об'єкт
```

---

## 5. Як `ref()` працює всередині

`ref()` реалізований через той самий механізм, що й `reactive()`, але простіше:

```javascript
function ref(rawValue) {
  let value = reactive(rawValue) // якщо це об'єкт, зробимо його реактивним
  const r = {
    get value() {
      track(r, 'value')
      return value
    },
    set value(newVal) {
      if (newVal !== value) {
        value = reactive(newVal)
        trigger(r, 'value')
      }
    }
  }
  return r
}
```

Тобто `ref()` - це просто об'єкт з геттером і сеттером,
який вміє відстежувати доступ до `.value` і сповіщати залежні ефекти при зміні.

---

## 6. Коли що використовувати

| Сценарій | Що використовувати |
|---|---|
| Примітивні значення (`число`, `рядок`, `boolean`) | `ref()` |
| Складні об'єкти (`object`, `array`, `map`) | `reactive()` |
| Потрібно зберігати одне значення і змінювати його | `ref()` |
| Потрібно керувати цілим станом | `reactive()` |
| Потрібно деструктурувати (наприклад, при поверненні з `setup()`) | Краще `ref()` (щоб не втрачати реактивність) |

---

## 7. Підводний камінь: деструктуризація

Якщо ти деструктуруєш `reactive`-об'єкт, реактивність **втрачається**:

```javascript
const state = reactive({ count: 0 })
const { count } = state
count++ // не реактивно
```

Тому що `count` тепер просто число, не Proxy.

А от `ref()` **не втрачає реактивність при деструктуризації**,
тому що значення зберігається в `.value`:

```javascript
const count = ref(0)
const { value } = count
// але в шаблоні Vue це не потрібно: {{ count }} автоматично бере count.value
```

---

## 8. Можна поєднувати ref і reactive

Vue автоматично **розпаковує** `ref` **всередині** `reactive`:

```javascript
const count = ref(0)
const state = reactive({ count })

console.log(state.count) // не потрібно .value
state.count++ // працює і оновлює count.value теж
```

Тобто `reactive()` «розуміє» `ref()` і робить доступ до нього зручним.

---

## 9. У шаблоні (`template`)

- У шаблоні `.value` **не потрібно писати**:

```javascript
  <template>
    <p>{{ count }}</p> 
  </template>
  ```
Vue робить автоматичне «розпакування» (unwrapping) `ref` всередині шаблонів.

---

## 10. Підсумок

| Критерій | `ref()` | `reactive()` |
|---|---|---|
| Для чого | Примітивні значення | Об'єкти і масиви |
| Тип результату | `{ value: ... }` | Proxy |
| Вкладені об'єкти | Не реактивні (потрібно вручну) | Глибоко реактивні |
| Зручний для | Простих станів, полів, прапорців | Комплексних структур даних |
| Авто-unwrap у шаблонах | Так | Не потрібен |
| Втрата реактивності при деструктуризації | Ні | Так |

---

**Коротко:**

> `ref()` - робить реактивним *одне значення* (зазвичай примітив).
> `reactive()` - робить реактивним *весь об'єкт* (і весь його вміст).
>
> Разом вони дають повний контроль над станом:
> `ref()` - точковий, `reactive()` - структурний.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати702 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.