Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке watch?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`watch` - це інструмент Vue, який дозволяє **реагувати на зміни стану**: виконувати код, коли змінюється значення `ref`, `reactive`, `computed` або навіть props. Простіше кажучи: watch - це "спостерігач", який стежить за даними і запускає функцію при їх зміні. **Ключове:** watch використовують для побічних ефектів (запити, таймери, localStorage), а не для відображення даних у UI - для цього призначений computed.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`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`, - дебаунсу і складної логіки.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.