Когда нужно использовать Watch во Vue

«Когда нужно использовать Watch во Vue» — вопрос из категории Vue, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

watch в Vue используется для реагирования на изменения данных, когда нужно выполнить асинхронные операции, сложную логику или побочные эффекты.

Когда использовать:

  • Отслеживание изменений конкретного свойства (например, валидация формы).
  • Асинхронные запросы (например, поиск при вводе).
  • Глубокая проверка объектов/массивов (с опцией deep: true).

Пример:

watch: {
  searchQuery(newVal, oldVal) {
    if (newVal !== oldVal) {
      this.fetchResults(newVal); // Делаем запрос при изменении
    }
  },
  user: {
    handler(newVal) {
      console.log('User data changed:', newVal);
    },
    deep: true // Отслеживаем вложенные поля
  }
}

Альтернатива: Для простых вычислений лучше использовать computed.