Что такое watch

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

Главное в ответе: watch нужен для побочного эффекта. Он не нужен, чтобы просто получить новую строку, число или объект для шаблона. Он нужен, когда изменение данных должно запустить действие: запрос, запись в хранилище, валидацию, аналитику или синхронизацию с внешним состоянием.

На интервью удобно сказать так: computed отвечает на вопрос, какое значение получается из текущих данных. watch отвечает на вопрос, что нужно сделать, когда данные изменились.

Если вы делаете fullName из имени и фамилии, это computed. Если при смене userId нужно загрузить профиль, это watch. Такая граница показывает, что вы не используете watch как универсальный инструмент для любой реакции.

Типичный практический пример: компонент получает userId, и при его изменении нужно загрузить пользователя. Рискованный вариант просто пишет ответ каждого запроса в состояние. Если пользователь быстро переключит id, медленный старый ответ может прийти позже и показать не того пользователя.

Более безопасный вариант в Composition API использует cleanup и отменяет прошлый запрос.

<script setup>
import { ref, watch } from 'vue';

const userId = ref('1');
const user = ref(null);
const loading = ref(false);
const error = ref(null);

watch(
  userId,
  async (id, _oldId, onCleanup) => {
    const controller = new AbortController();
    onCleanup(() => controller.abort());

    loading.value = true;
    error.value = null;

    try {
      const response = await fetch(`/api/users/${id}`, {
        signal: controller.signal,
      });

      if (!response.ok) {
        throw new Error('Failed to load user');
      }

      user.value = await response.json();
    } catch (e) {
      if (e.name !== 'AbortError') {
        error.value = e;
      }
    } finally {
      if (!controller.signal.aborted) {
        loading.value = false;
      }
    }
  },
  { immediate: true },
);
</script>

Здесь immediate: true нужен для первой загрузки, а onCleanup защищает UI от устаревшего запроса. Отдельные loading и error не дают экрану зависнуть в непонятном состоянии. Если API нельзя отменить, можно хранить текущий id запроса и перед записью результата проверять, что он все еще актуален.

Если эффект зависит от нескольких значений, в Composition API можно наблюдать массив источников. Это лучше, чем делать несколько почти одинаковых watcher.

watch([categoryId, page, sort], ([newCategoryId, newPage, newSort]) => {
  loadProducts({
    categoryId: newCategoryId,
    page: newPage,
    sort: newSort,
  });
});

Практический вывод: перечисляйте ровно те зависимости, которые запускают эффект. Watcher на большое состояние целиком чаще приводит к лишним запросам, сложной отладке и неожиданным срабатываниям.

deep: true нужен, когда вы наблюдаете объект целиком и хотите реагировать на изменения внутри него. Но это не настройка на всякий случай. Чем больше объект, тем выше риск лишних срабатываний и затрат на отслеживание.

Часто лучше следить за конкретным полем или геттером:

watch(
  () => user.value.profile.email,
  (email) => {
    validateEmail(email);
  },
);

Так код честно показывает, от чего зависит эффект. Это проще читать, проще тестировать и сложнее случайно сломать при расширении объекта.

Хороший короткий ответ может звучать так:

watch во Vue отслеживает изменение реактивного источника и запускает обработчик. Я использую его для побочных эффектов, например для запроса при смене id, валидации или синхронизации с URL. Если нужно просто получить производное значение для шаблона, я выберу computed. Для async-watch важно не забыть про отмену или игнорирование устаревших запросов.

Эта формулировка закрывает определение, отличие от computed и практический риск. Если у вас есть опыт с Vue 2 Options API, можно добавить, что идея та же, но синтаксис отличается: в Options API watcher описывают в секции watch, а в Composition API используют функцию watch.