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

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

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

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

Контент

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

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

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

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

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

`shallowRef()` - це варіант `ref()`, який робить **реактивним лише саме значення**, але **НЕ робить реактивним вміст об'єкта**, якщо всередині - об'єкт, масив або будь-яка складна структура.

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

> `shallowRef()` **відстежує лише зміну** `.value`**, але не стежить за внутрішніми властивостями об'єкта.**

Це *поверхнева* реактивність («shallow» - мілка, неглибока).

---

## Як працює shallowRef()

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

const state = shallowRef({ count: 0 })
```

#### Що відстежується:

- зміна самого `state.value`

#### Що НЕ відстежується:

- `state.value.count++`
(Vue не побачить цю зміну)

---

## Приклад

```js
const obj = shallowRef({ n: 1 })

obj.value.n++      // UI НЕ оновиться
obj.value = { n: 2 } // UI оновиться
```

Чому?

- `shallowRef` реагує лише на заміну `value`
- а не на зміни всередині об'єкта

---

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

### 1. Для великих об'єктів, де глибока реактивність не потрібна

Наприклад, якщо об'єкт містить 100 000 елементів або важкі структури:

```js
const hugeData = shallowRef(veryBigObject)
```

Це економить пам'ять і прискорює роботу.

---

### 2. При роботі з **DOM-елементами**

```js
const el = shallowRef(null)
```

DOM не повинен бути реактивним.
`ref()` спробує зробити його реактивним - це зайве.
`shallowRef()` - ідеально.

---

### 3. Для сторонніх бібліотек і екземплярів класів

Наприклад, карти, графіки, редактори:

```js
const chart = shallowRef(null)
```

Тому що об'єкти Chart.js, Leaflet, Three.js **не повинні** бути реактивними.

---

### 4. Коли ви хочете самі контролювати оновлення

Тоді використовуйте `triggerRef()`:

```js
import { shallowRef, triggerRef } from 'vue'

const data = shallowRef({ count: 0 })

data.value.count++
triggerRef(data)   // вручну оновлюємо UI
```

---

## shallowRef vs ref (важлива відмінність)

| Особливість | ref | shallowRef |
|---|---|---|
| відстежує вкладені властивості | так | ні |
| глибока реактивність | так | ні |
| підходить для об'єктів | так | якщо глибока не потрібна |
| перемальовування при кожному nested update | так | ні |
| перемальовування лише при заміні value | ні | так |

---

## Приклад, де ref гірший за shallowRef

Стороння бібліотека:

```js
const editor = ref(new CodeMirror(...))
```

Vue намагатиметься зробити редактор *повністю реактивним*. Це:

- сповільнить роботу
- створить дивні помилки
- збільшить пам'ять

Правильний варіант:

```js
const editor = shallowRef(null)
```

---

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

> `shallowRef()` **створює поверхневий реактивний ref.**
> **Vue відстежує лише зміну** `.value`**, а не вкладених властивостей.**
> **Використовується для DOM-елементів, великих об'єктів, екземплярів класів, об'єктів сторонніх бібліотек і випадків, коли глибока реактивність не потрібна.**

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

Для рев’юера

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

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