Что такое computed?

`computed` во Vue — вычисляемое свойство: значение, которое строится из реактивных данных и кешируется.

Пример

const items = ref([
  { name: 'Чай', price: 100 },
  { name: 'Кофе', price: 150 },
]);
const total = computed(() => items.value.reduce((sum, item) => sum + item.price, 0));

В шаблоне {{ total }} обновится автоматически при изменении items.

Как работает

• При первом обращении Vue вычисляет значение и запоминает, какие данные были прочитаны.
• Пока эти данные не изменились, повторные обращения возвращают кеш.
• Изменили зависимость — при следующем обращении значение пересчитается.

Записываемый computed

const fullName = computed({
  get: () => `${first.value} ${last.value}`,
  set: (value) => ([first.value, last.value] = value.split(' ')),
});

Правила

Getter должен быть чистым: без запросов, мутаций и асинхронности — для этого есть watch.

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

computed — кешируемое значение, вычисляемое из реактивных данных и пересчитываемое только при их изменении.

Подробнее: Vue — Вычисляемые свойства