Що робить параметр `deep`?

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

Параметр deep у функції watch() вмикає глибоке відстеження реактивного об'єкта, тобто Vue реагуватиме на зміни будь-яких вкладених властивостей, а не лише на зміну посилання на об'єкт.

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

deep: true дозволяє відстежувати зміни всередині об'єкта чи масиву, навіть якщо змінюється вкладена властивість.

Чому без `deep` вкладені зміни не відстежуються?

Типово watch(obj) відстежує лише посилання:

const user = reactive({ name: 'Alex', info: { age: 25 } })

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

Викличе handler лише якщо замінити весь об'єкт:

user = { ... }  // Так
user.info.age = 30 // handler НЕ спрацює

Що робить deep: true?

watch(
  user,
  () => console.log('щось усередині user змінилося'),
  { deep: true }
)

Тепер handler викличеться при:

user.name = 'John'
user.info.age = 26
user.info = { ... }
user.newField = ...
зміні масиву всередині user
будь-якій вкладеній зміні

Приклад: стеження за формою

const form = reactive({
  name: '',
  address: {
    city: '',
    street: ''
  }
})

watch(
  form,
  () => console.log('форма змінилася'),
  { deep: true }
)

Зміна:

form.address.city = 'Paris'

викличе watcher - тому що deep: true.

Коли використовувати deep: true?

1. Для складних форм

watch(form, saveToLocalStorage, { deep: true })

2. Для вкладених об'єктів

watch(settings, applyChanges, { deep: true })

3. Для масивів і об'єктів усередині них

watch(items, handleChange, { deep: true })

4. Для «глобальних» налаштувань, де може змінитися що завгодно

Важливі нюанси

1. deep watch може бути дорогим

Vue рекурсивно проходить об'єкт, щоб відстежувати всі поля.

Не варто використовувати deep для величезних об'єктів.

2. Краще відстежувати конкретні поля, якщо це можливо

Замість:

watch(filters, doSomething, { deep: true })

Краще:

watch(() => filters.query, doSomething)

3. `watchEffect` автоматично «глибокий»

Але немає контролю над залежностями.

Підсумок (ідеально для співбесіди)

deep: true вмикає глибоке відстеження об'єкта. Vue реагуватиме на зміну будь-яких вкладених властивостей, а не лише на зміну посилання. Корисно для форм, налаштувань, масивів і складних об'єктів, але може бути дорогим за продуктивністю.

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

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

Premium

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