Для чого потрібен watch?

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

watch потрібен для відстеження змін реактивних даних і виконання побічних ефектів (side-effects), коли ці дані змінюються.

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

watch - це реакція на зміну значення. Коли щось змінилося -> виконується ваш код.

Це відрізняє його від computed, який лише обчислює і кешує, але не виконує дій.

Коли використовувати watch? (найважливіше для співбесіди)

1. Для побічних ефектів

Те, що не можна робити в computed, але потрібно робити при зміні значення:

запити до API
запис у localStorage
логування
взаємодія з DOM
виклик функцій сторонніх бібліотек

Приклад:

watch(query, () => {
  fetchData(query.value)
})

Щоразу при зміні query надсилається запит.

2. Для відстеження змін форми чи об'єкта

watch(form, (newVal) => {
  saveDraft(newVal)
}, { deep: true })

3. Для реакції на зміну маршруту (route)

watch(() => route.params.id, (id) => loadUser(id))

4. Для виконання логіки при зміні пропсів

watch(() => props.item, (newVal) => {
  console.log("prop changed:", newVal)
})

5. Для запуску логіки одразу + при зміні (with immediate)

watch(userId, loadUser, { immediate: true })

Приклад простого watch

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count: ${oldValue} → ${newValue}`)
})

Спрацює при кожній зміні count.

Опції watch

`deep: true` - відстежувати вкладені властивості

watch(settings, handler, { deep: true })

`immediate: true` - запустити ефект одразу

watch(id, load, { immediate: true })

відстеження декількох значень

watch([a, b], ([newA, newB]) => {})

watch vs computed (часте питання!)

watch	computed
виконує дії	повертає значення
не кешується	кешується
підходить для API і side-effects	підходить для похідних значень
може бути async	лише sync (getter)
відстежує і об'єкти, і функції	працює лише на залежностях у getter

Підсумок:

Якщо треба щось зробити -> watch
Якщо треба щось обчислити -> computed

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

watch потрібен для виконання побічних ефектів при зміні реактивних даних: запитів, збереження, логування, роботи з DOM, реакції на props і route. Використовується для того, що computed робити не повинен.

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

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

Premium

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