PassFront
  1. PassFront
  2. База знаний
  3. Реактивность

Чем computed отличается от watch и методов во Vue?

Реактивность

`computed` — кешируемое производное значение, `watch` — побочный эффект при изменении данных, метод — функция, которая вызывается каждый раз.

computed

const fullName = computed(() => `${first.value} ${last.value}`);
  • Пересчитывается, только когда изменились зависимости, иначе отдаёт кеш.
  • Должен быть чистым: ничего не менять и не запрашивать.

watch

watch(userId, async (id) => {
  user.value = await fetchUser(id);   // побочный эффект: запрос
});

Подходит для запросов, записи в localStorage, таймеров, реакции на изменение.

Метод

Выполняется при каждом вызове (в шаблоне при каждом рендере), кеша нет. Подходит для действий и обработчиков событий.

Выбор

Нужно вычислить новое значение из существующих — computed. Нужно что-то сделать при изменении — watch. Нужно выполнить действие по событию — метод.

Коротко для собеседования

computed — кеш вычисления без побочных эффектов, watch — реакция с эффектами, метод — вызов без кеша.

Другие вопросы раздела