Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке watch()?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`watch()` - це функція з Composition API (Vue 3), яка дозволяє спостерігати за змінами реактивних даних і виконувати побічні ефекти, коли ці дані змінюються. **Ключове:** `watch()` "стежить" за реактивним значенням, і коли воно змінюється - запускає функцію-обробник.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`watch()` - це функція з Composition API (Vue 3), яка дозволяє **спостерігати за змінами реактивних даних** і виконувати **побічні ефекти**, коли ці дані змінюються. Простіше кажучи: > `watch()` **"стежить" за реактивним значенням, і коли воно змінюється - запускає функцію-обробник.** Це аналог `watch` з Options API, але більш гнучкий. --- ## Просте використання watch() ```js import { ref, watch } from 'vue' const count = ref(0) watch(count, (newVal, oldVal) => { console.log('count змінився:', oldVal, '→', newVal) }) ``` Коли `count.value++` → спрацює обробник. --- ## Що можна відстежувати? ### 1. ref ```js watch(count, ...) ``` ### 2. reactive об'єкт (тільки за посиланням!) ```js watch(form, () => { console.log('Форма змінилася (будь-яке поле)') }) ``` ### 3. конкретне поле reactive ```js watch(() => form.email, (newVal) => { console.log('email змінився:', newVal) }) ``` ### 4. масив залежностей ```js watch([foo, () => bar.value], ([newFoo, newBar]) => { console.log(newFoo, newBar) }) ``` --- ## Коли використовують watch()? ### 1. Для побічних ефектів Те, що **не повинно** бути в computed: - запити на сервер - збереження чернеток - логування - оновлення localStorage - взаємодія зі сторонніми бібліотеками Приклад: ```js watch(query, () => { fetchData(query.value) }) ``` --- ### 2. Для глибокого відстеження об'єктів ```js watch(form, (newVal) => { console.log('змінилося будь-яке поле у формі') }, { deep: true }) ``` --- ### 3. Для реакції на зміну route, props, параметрів URL ```js watch(() => route.params.id, (id) => { loadUser(id) }) ``` --- ### 4. Для debounce або throttle ```js watch(search, debounce((val) => { fetchSearch(val) }, 500)) ``` --- ## Опції watch() #### 1) **deep** - глибоке спостереження ```js watch(obj, handler, { deep: true }) ``` #### 2) **immediate** - викликати одразу при ініціалізації ```js watch(count, handler, { immediate: true }) ``` (дуже корисно для завантаження даних) #### 3) **flush** - коли викликати обробник - `pre` (за замовчуванням, до оновлення DOM) - `post` (після оновлення DOM) - `sync` (негайно) Приклад: ```js watch(value, handler, { flush: 'post' }) ``` Використовується для роботи з DOM після зміни даних. --- ## watch() vs computed() - важлива тема для співбесід | watch | computed | |---|---| | виконує побічні ефекти | повертає обчислюване значення | | асинхронний | синхронний | | може бути глибоким | працює тільки із залежностями | | не кешується | кешується | | для API, логіки, ефектів | для похідних даних | Якщо "потрібно отримати значення" → computed. Якщо "потрібно зробити щось при зміні" → watch. --- ## Приклад використання watchEffect Порівняння: ```js watch(() => count.value, (n) => console.log(n)) ``` проти ```js watchEffect(() => { console.log(count.value) }) ``` `watchEffect()` автоматично збирає залежності. --- ## Підсумок (ідеально для співбесіди) > `watch()` **- це функція для відстеження змін реактивних даних і виконання побічних ефектів.** > **Використовується для API-запитів, логіки, side-effects, синхронізації, збереження даних.** > **Підтримує deep, immediate, масив залежностей, flush-режими.** > **Відрізняється від computed тим, що виконує дії, а не повертає значення.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.