Что такое вычисляемые свойства

Computed во Vue отвечает на вопрос: какое значение получается из текущего реактивного состояния. Это не команда и не обработчик события, а производное значение.

Например, у вас есть список задач и фильтр. Шаблону не обязательно знать, как именно фильтровать массив. Вы можете дать ему готовое значение:

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

const query = ref('');
const tasks = ref([
  { id: 1, title: 'Fix search', done: false },
  { id: 2, title: 'Update tests', done: true },
]);

const visibleTasks = computed(() => {
  const text = query.value.trim().toLowerCase();

  return tasks.value.filter((task) =>
    task.title.toLowerCase().includes(text)
  );
});
</script>

Здесь visibleTasks зависит от query и tasks. Пока они не изменились, Vue может вернуть закэшированный результат. Если изменился фильтр или список, значение пересчитается.

Самая частая ловушка на интервью: сказать, что computed это просто метод. Внешне похоже, потому что внутри тоже есть функция, но контракт другой.

Computed используется как значение. Метод используется как действие или вычисление по вызову. Watch используется как реакция на изменение, когда нужно выполнить побочный эффект.

Если вы объясните выбор через задачу, ответ будет звучать сильнее:

Если мне нужно только показать производное значение в UI, я выберу computed. Если мне нужно что-то сделать при изменении значения, например отправить запрос или записать данные во внешнюю систему, я выберу watch. Если логика запускается по событию пользователя или требует аргументов, подойдет метод.

Кэширование полезно, когда значение читается несколько раз или расчет не совсем дешевый. Например, фильтрация и сортировка большого списка в шаблоне как метод может выполняться чаще, чем вы ожидаете.

Плохой пример:

<template>
  <UserRow
    v-for="user in getVisibleUsers()"
    :key="user.id"
    :user="user"
  />
</template>

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

Getter computed должен быть предсказуемым. Он читает реактивные зависимости и возвращает результат. Он не должен менять состояние, отправлять запросы, запускать таймеры или писать в браузерные API.

Плохой пример:

const total = computed(() => {
  analytics.track('cart_total_read');
  cartWasRead.value = true;

  return items.value.reduce((sum, item) => sum + item.price, 0);
});

Проблема в том, что простое чтение total теперь меняет приложение и отправляет аналитику. Это может сработать несколько раз, сработать не тогда, когда вы ожидаете, или спровоцировать лишний рендер. Аналитику и изменение состояния лучше вынести в явный обработчик или watch, если это действительно реакция на изменение.

Computed не подходит для загрузки данных. Запрос имеет состояние: загрузка, ошибка, успешный результат, повтор, отмена, гонка ответов. Если спрятать это в computed, код станет непредсказуемым для UI.

Небезопасный вариант: запускать запрос без отмены и без проверки актуальности. Если пользователь быстро меняет фильтр, старый ответ может прийти позже нового и затереть правильный список. UI покажет данные не для текущего запроса.

Безопаснее следить за фильтром, запускать запрос отдельно, сохранять результат в реактивное состояние и отменять устаревший запрос.

import { ref, watch } from 'vue';

const query = ref('');
const users = ref([]);
const loading = ref(false);
const error = ref(null);

watch(query, async (value, _oldValue, onCleanup) => {
  const controller = new AbortController();

  onCleanup(() => {
    controller.abort();
  });

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

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

    if (!response.ok) {
      throw new Error('Request failed');
    }

    users.value = await response.json();
  } catch (reason) {
    if (!controller.signal.aborted) {
      error.value = reason;
    }
  } finally {
    if (!controller.signal.aborted) {
      loading.value = false;
    }
  }
});

В реальном коде для быстрых изменений фильтра еще часто добавляют debounce. Но главный тезис для интервью простой: computed не место для async side effects, потому что запросу нужны loading, error, отмена и защита от race condition.

По умолчанию computed только читается. Но во Vue можно описать get и set, чтобы значение можно было записывать. Это часто встречается рядом с v-model или когда нужно проксировать значение из props через emit.

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`.trim();
  },
  set(value) {
    const [first, ...rest] = value.split(' ');
    firstName.value = first ?? '';
    lastName.value = rest.join(' ');
  },
});

Такой setter допустим, потому что он явно обновляет исходные данные. Но не стоит прятать внутрь setter сетевые запросы, сложный submit или неочевидные побочные эффекты. Иначе обычная запись значения станет слишком дорогой и рискованной.

На интервью лучше отвечать не только определением, но и правилом выбора. Хорошая короткая формулировка может звучать так:

Computed во Vue это кэшируемое производное значение от реактивного состояния. Я использую его для чистых синхронных расчетов, которые удобно читать в шаблоне. Если нужно выполнить побочный эффект, например запрос или запись во внешнее хранилище, я не кладу это в computed, а использую watch, метод или обработчик события.

После этого можно привести пример с фильтрацией списка. Это покажет, что вы понимаете не только термин, но и практический риск: лишние пересчеты, устаревший UI и side effects при чтении значения.