Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить параметр `deep`?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Параметр **`deep`** у функції `watch()` вмикає **глибоке відстеження реактивного об'єкта**, тобто Vue реагуватиме **на зміни будь-яких вкладених властивостей**, а не лише на зміну посилання на об'єкт. **Ключове:** `deep: true` дозволяє відстежувати зміни всередині об'єкта чи масиву, навіть якщо змінюється вкладена властивість.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняПараметр `deep` у функції `watch()` вмикає **глибоке відстеження реактивного об'єкта**, тобто Vue реагуватиме **на зміни будь-яких вкладених властивостей**, а не лише на зміну посилання на об'єкт. Простіше кажучи: > `deep: true` **дозволяє відстежувати зміни всередині об'єкта чи масиву, навіть якщо змінюється вкладена властивість.** --- ## Чому без `deep` вкладені зміни не відстежуються? Типово `watch(obj)` відстежує **лише посилання**: ```js const user = reactive({ name: 'Alex', info: { age: 25 } }) watch(user, () => { console.log('user змінився') }) ``` Викличе handler **лише якщо замінити весь об'єкт**: ```js user = { ... } // Так user.info.age = 30 // handler НЕ спрацює ``` --- ## Що робить deep: true? ```js watch( user, () => console.log('щось усередині user змінилося'), { deep: true } ) ``` Тепер handler викличеться при: - `user.name = 'John'` - `user.info.age = 26` - `user.info = { ... }` - `user.newField = ...` - зміні масиву всередині user - будь-якій вкладеній зміні --- ## Приклад: стеження за формою ```js const form = reactive({ name: '', address: { city: '', street: '' } }) watch( form, () => console.log('форма змінилася'), { deep: true } ) ``` Зміна: ```js form.address.city = 'Paris' ``` викличе watcher - **тому що deep: true**. --- ## Коли використовувати deep: true? #### 1. Для складних форм ```js watch(form, saveToLocalStorage, { deep: true }) ``` #### 2. Для вкладених об'єктів ```js watch(settings, applyChanges, { deep: true }) ``` #### 3. Для масивів і об'єктів усередині них ```js watch(items, handleChange, { deep: true }) ``` #### 4. Для «глобальних» налаштувань, де може змінитися що завгодно --- ## Важливі нюанси ### 1. deep watch може бути дорогим Vue рекурсивно проходить об'єкт, щоб відстежувати всі поля. Не варто використовувати deep для величезних об'єктів. --- ### 2. Краще відстежувати конкретні поля, якщо це можливо Замість: ```js watch(filters, doSomething, { deep: true }) ``` Краще: ```js watch(() => filters.query, doSomething) ``` --- ### 3. `watchEffect` автоматично «глибокий» Але немає контролю над залежностями. --- ## Підсумок (ідеально для співбесіди) > `deep: true` **вмикає глибоке відстеження об'єкта.** > **Vue реагуватиме на зміну будь-яких вкладених властивостей, а не лише на зміну посилання.** > **Корисно для форм, налаштувань, масивів і складних об'єктів, але може бути дорогим за продуктивністю.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.