Що таке watch()?

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

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

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

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

Це аналог watch з Options API, але більш гнучкий.

Просте використання watch()

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log('count змінився:', oldVal, '→', newVal)
})

Коли count.value++ → спрацює обробник.

Що можна відстежувати?

1. ref

watch(count, ...)

2. reactive об'єкт (тільки за посиланням!)

watch(form, () => {
  console.log('Форма змінилася (будь-яке поле)')
})

3. конкретне поле reactive

watch(() => form.email, (newVal) => {
  console.log('email змінився:', newVal)
})

4. масив залежностей

watch([foo, () => bar.value], ([newFoo, newBar]) => {
  console.log(newFoo, newBar)
})

Коли використовують watch()?

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

Те, що не повинно бути в computed:

запити на сервер
збереження чернеток
логування
оновлення localStorage
взаємодія зі сторонніми бібліотеками

Приклад:

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

2. Для глибокого відстеження об'єктів

watch(form, (newVal) => {
  console.log('змінилося будь-яке поле у формі')
}, { deep: true })

3. Для реакції на зміну route, props, параметрів URL

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

4. Для debounce або throttle

watch(search, debounce((val) => {
  fetchSearch(val)
}, 500))

Опції watch()

1) deep - глибоке спостереження

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

2) immediate - викликати одразу при ініціалізації

watch(count, handler, { immediate: true })

(дуже корисно для завантаження даних)

3) flush - коли викликати обробник

pre (за замовчуванням, до оновлення DOM)
post (після оновлення DOM)
sync (негайно)

Приклад:

watch(value, handler, { flush: 'post' })

Використовується для роботи з DOM після зміни даних.

watch() vs computed() - важлива тема для співбесід

watch	computed
виконує побічні ефекти	повертає обчислюване значення
асинхронний	синхронний
може бути глибоким	працює тільки із залежностями
не кешується	кешується
для API, логіки, ефектів	для похідних даних

Якщо "потрібно отримати значення" → computed. Якщо "потрібно зробити щось при зміні" → watch.

Приклад використання watchEffect

Порівняння:

watch(() => count.value, (n) => console.log(n))

проти

watchEffect(() => {
  console.log(count.value)
})

watchEffect() автоматично збирає залежності.

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

watch() - це функція для відстеження змін реактивних даних і виконання побічних ефектів. Використовується для API-запитів, логіки, side-effects, синхронізації, збереження даних. Підтримує deep, immediate, масив залежностей, flush-режими. Відрізняється від computed тим, що виконує дії, а не повертає значення.

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

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

Premium

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