> В чем проблема watch с опцией deep во Vue и что он отслеживает (Vue.js)

Короткий ответ

Проблема deep: true во Vue - неявный мониторинг всех вложенных полей объекта, что приводит к избыточным вычислениям и утечкам памяти при больших структурах данных. Watch отслеживает изменения по ссылке или значению, а с deep - рекурсивно обходит все уровни вложенности, вызывая коллбэк при любом изменении внутри объекта, включая добавление/удаление свойств.

Подробное объяснение

Опция deep: true во Vue заставляет watcher выполнять глубокое сравнение объекта, рекурсивно обходя все его свойства на каждом тике event loop. Это дорогостоящая операция: при изменении любого вложенного поля Vue создаёт глубокую копию старого значения для сравнения, что потребляет память и CPU. Проблема усугубляется с ростом глубины и размера объекта - каждый ререндеринг или мутация данных триггерит полный обход.

Watch с deep отслеживает любые изменения внутри объекта: добавление новых свойств, удаление, изменение примитивов, вложенных массивов и объектов. Однако он не отслеживает изменения, которые происходят через Vue.set или прямую замену свойства на том же уровне, если объект не реактивен изначально. Для массивов deep не отслеживает изменения по индексу, если массив не был заменён целиком.

На практике

На собеседовании важно показать понимание trade-off: deep watch удобен для сложных структур, но его использование без необходимости - антипаттерн. Вместо этого стоит применять:

• computed свойства для производных данных
• watch на конкретные вложенные поля через строковый путь ('obj.nested.field')
• ручное клонирование или JSON.parse(JSON.stringify()) для сравнения
• watch с immediate и deep только для критичных сценариев

Пример кода

JAVASCRIPT
// Проблема: deep watch на большой объект
data() {
  return {
    user: {
      profile: { name: 'John', address: { city: 'NYC' } },
      settings: { theme: 'dark' }
    }
  }
},
watch: {
  user: {
    handler(newVal, oldVal) {
      // Вызывается при любом изменении внутри user
      console.log('User changed');
    },
    deep: true // Дорого, если user большой
  }
}

// Решение: watch на конкретное поле
watch: {
  'user.profile.name': function(newVal, oldVal) {
    console.log('Name changed');
  }
}

Как отвечать на собеседовании

Начни с чёткого определения проблемы - производительность и неявные триггеры. Приведи пример, когда deep watch вызывает лишние срабатывания. Затем предложи альтернативы: watch на путь, computed, ручное сравнение. Покажи понимание внутреннего устройства Vue - как работает реактивность и почему deep watch дорог. Упомяни, что в Vue 3 с Proxy deep watch стал эффективнее, но проблема остаётся для больших объектов.

Что проверяет интервьюер

• Понимание механизма реактивности Vue
• Умение оценивать производительность и выбирать правильный инструмент
• Знание альтернатив deep watch
• Способность объяснить trade-off между удобством и производительностью

Типичные ошибки

• Утверждение, что deep watch отслеживает изменения в массивах по индексу (это не так без замены ссылки)
• Использование deep watch для простых объектов, где достаточно watch на конкретное поле
• Игнорирование проблемы производительности при работе с большими данными
• Путаница между deep watch и immediate опцией