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

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

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

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

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

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

Як працює shallowRef()

import { shallowRef } from 'vue'

const state = shallowRef({ count: 0 })

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

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

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

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

Приклад

const obj = shallowRef({ n: 1 })

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

Чому?

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

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

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

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

const hugeData = shallowRef(veryBigObject)

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

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

const el = shallowRef(null)

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

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

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

const chart = shallowRef(null)

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

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

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

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

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

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

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

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

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

const editor = shallowRef(null)

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

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

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

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

Premium

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