Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Для чого потрібен watch?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`watch`** потрібен для **відстеження змін реактивних даних** і виконання **побічних ефектів** (side-effects), коли ці дані змінюються. **Ключове:** watch - це реакція на зміну значення: коли щось змінилося, виконується ваш код, на відміну від `computed`, який лише обчислює й кешує значення, але не виконує дій.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`watch` потрібен для **відстеження змін реактивних даних** і виконання **побічних ефектів** (side-effects), коли ці дані змінюються. Простіше кажучи: > **watch - це реакція на зміну значення.** > **Коли щось змінилося -> виконується ваш код.** Це відрізняє його від `computed`, який *лише обчислює і кешує*, але *не виконує дій*. --- ## Коли використовувати watch? (найважливіше для співбесіди) ### 1. **Для побічних ефектів** Те, що **не можна** робити в `computed`, але потрібно робити при зміні значення: - запити до API - запис у localStorage - логування - взаємодія з DOM - виклик функцій сторонніх бібліотек **Приклад:** ```js watch(query, () => { fetchData(query.value) }) ``` Щоразу при зміні `query` надсилається запит. --- ### 2. **Для відстеження змін форми чи об'єкта** ```js watch(form, (newVal) => { saveDraft(newVal) }, { deep: true }) ``` --- ### 3. **Для реакції на зміну маршруту (route)** ```js watch(() => route.params.id, (id) => loadUser(id)) ``` --- ### 4. **Для виконання логіки при зміні пропсів** ```js watch(() => props.item, (newVal) => { console.log("prop changed:", newVal) }) ``` --- ### 5. **Для запуску логіки одразу + при зміні (with immediate)** ```js watch(userId, loadUser, { immediate: true }) ``` --- ## Приклад простого watch ```js const count = ref(0) watch(count, (newValue, oldValue) => { console.log(`count: ${oldValue} → ${newValue}`) }) ``` Спрацює при кожній зміні `count`. --- ## Опції watch #### `deep: true` - відстежувати вкладені властивості ```js watch(settings, handler, { deep: true }) ``` #### `immediate: true` - запустити ефект одразу ```js watch(id, load, { immediate: true }) ``` #### відстеження декількох значень ```js watch([a, b], ([newA, newB]) => {}) ``` --- ## watch vs computed (часте питання!) | watch | computed | |---|---| | виконує *дії* | повертає значення | | не кешується | кешується | | підходить для API і side-effects | підходить для похідних значень | | може бути async | лише sync (getter) | | відстежує і об'єкти, і функції | працює лише на залежностях у getter | **Підсумок:** - Якщо треба *щось зробити* -> **watch** - Якщо треба *щось обчислити* -> **computed** --- ## Підсумок (ідеально для співбесіди) > **watch потрібен для виконання побічних ефектів при зміні реактивних даних: запитів, збереження, логування, роботи з DOM, реакції на props і route.** > **Використовується для того, що computed робити не повинен.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.