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

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

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

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

Контент

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

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

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

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

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

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

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

> `ref()` **робить значення реактивним.**
> **Для примітивів (**`string`**,** `number`**,** `boolean`**) це єдиний спосіб зробити їх "живими" в Composition API.**

Це один з ключових інструментів реактивності у Vue 3.

---

## Як виглядає ref?

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

const count = ref(0)
```

Це створює об'єкт:

```js
{
  value: 0        // реактивна властивість
}
```

---

## Як з ним працювати?

### Читання:

```js
console.log(count.value)
```

### Зміна:

```js
count.value++
```

Vue автоматично відстежить зміну і оновить DOM.

---

## Приклад у компоненті

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

const message = ref('Hello')

function update() {
  message.value = 'Updated!'
}
</script>

<template>
  <p>{{ message }}</p>
  <button @click="update">Change</button>
</template>
```

---

## Чому потрібен `.value`?

Тому що `ref` - це об'єкт, а реактивна властивість зберігається в ключі `value`.

Але у шаблонах `.value` не потрібен - Vue робить автоматичне "розпакування":

```html
<p>{{ message }}</p>  
```

---

## Для яких типів даних використовують ref()?

### Примітиви

(обов'язково!)

```js
const count = ref(0)
const name = ref('Alex')
const isVisible = ref(true)
```

### DOM-елементи (template refs)

```html
<input ref="inputEl">
```

```js
const inputEl = ref(null)
```

### Об'єкти, якщо потрібна *можливість замінити весь об'єкт*

```js
const user = ref({ name: 'Alex' })
user.value = { name: 'John' } // можна замінити цілком
```

---

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

| ref | reactive |
|---|---|
| для примітивів | для об'єктів |
| зберігається в `.value` | працює як звичайний об'єкт |
| можна замінити повністю | замінювати не можна (втрачається реактивність) |
| працює і з примітивами, і з об'єктами | лише об'єкти, масиви, Map, Set |

---

## Автоматичне пакування/розпакування ref

### У шаблоні:

```html
<p>{{ count }}</p>  
```

### При деструктуризації:

Не можна:

```js
const { count } = form // втрачається реактивність
```

Правильно:

```js
import { toRefs } from 'vue'
const { count } = toRefs(form)
```

---

## Важливі нюанси

### 1. Мутувати `.value` можна завжди

Це тригерить оновлення UI.

### 2. Змінювати ref на новий об'єкт можна

(ref можна перезаписати цілком).

### 3. `ref` всередині об'єктів автоматично стає реактивним

Vue робить проксі-обгортку.

---

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

> `ref()` **- функція Composition API, що створює реактивне значення.**
> **Зберігає значення у властивості** `.value`**.**
> **Обов'язковий для примітивів у Composition API.**
> **Використовується для даних, DOM-елементів і будь-яких значень, які мають реагувати на зміни.**

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

Для рев’юера

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

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