Що таке watch?

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

watch - це інструмент Vue, який дозволяє реагувати на зміни стану: виконувати код, коли змінюється значення ref, reactive, computed або навіть props.

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

watch - це "спостерігач", який стежить за даними і запускає функцію при їх зміні.

Простий приклад

javascript

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log("count змінився:", oldValue, "→", newValue)
})
</script>

Коли count.value++ - watch спрацьовує.

Навіщо потрібен watch?

watch використовують для побічних ефектів, наприклад:

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

watch - НЕ для відображення даних у UI (для цього computed і вивід у шаблон).

Синтаксис watch

1) Стежити за одним значенням

javascript

watch(source, callback)

2) Відстеження ref

javascript

watch(count, (newVal, oldVal) => {
  console.log(newVal)
})

3) Відстеження reactive об'єкта

Щоб відстежувати весь об'єкт, потрібно використати:

javascript

watch(user, (newValue, oldValue) => {
  console.log("user змінився", newValue)
})

Але тут є важливий нюанс - deep watching: Vue за замовчуванням не відстежує вкладені поля, потрібно вказувати { deep: true }.

4) Відстежувати конкретну властивість reactive

Правильно:

javascript

watch(() => user.age, (newVal) => {
  console.log("Вік змінився:", newVal)
})

5) Кілька джерел

javascript

watch([firstName, lastName], ([newF, newL]) => {
  console.log("Ім'я або прізвище змінилися")
})

Важливі налаштування watch

1) `{ immediate: true }`

Запустити watcher одразу:

javascript

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

2) `{ deep: true }`

Для відстеження вкладених об'єктів:

javascript

watch(user, callback, { deep: true })

3) Очищення ефектів (onCleanup)

javascript

watch(id, (newId, _, onCleanup) => {
  const controller = new AbortController()

  fetch(`/api/${newId}`, { signal: controller.signal })

  onCleanup(() => controller.abort())
})

Використовується при скасуванні запитів, таймерів і підписок.

Різниця між watch і computed

Задача	computed	watch
Отримати похідне значення	Так	Ні
Реагувати на зміну	Не для цього	Так
Побічні ефекти	Не можна	Можна
Кешування	Так	Ні

Приклад: надсилання запиту при введенні

javascript

<script setup>
import { ref, watch } from 'vue'

const query = ref("")

watch(query, async (newQuery) => {
  const data = await fetch(`/search?q=${newQuery}`).then(r => r.json())
  console.log(data)
})
</script>

Підсумок (коротко)

watch - це реактивний спостерігач, який запускає функцію щоразу при зміні обраних даних.

Використовується для:

побічних ефектів,
запитів,
таймерів,
синхронізації зовнішніх сервісів,
роботи з localStorage,
дебаунсу і складної логіки.

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

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

Premium

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