Справочник Vue

computed: вычисляемые значения Vue

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

Рабочий пример

<script setup>
import { ref, computed } from "vue";
const products = ref([{ price: 100 }, { price: 250 }]);
const total = computed(() =>
  products.value.reduce((sum, item) => sum + item.price, 0)
);
</script>
<template><strong>{{ total }} ₽</strong></template>

В script computed возвращает ref, поэтому читается через .value. В шаблоне Vue разворачивает значение автоматически. Обычный getter должен оставаться без побочных эффектов.

Когда применять

Применяй computed для отфильтрованного списка, общей цены и форматированной подписи. Если требуется выполнить действие при изменении, используй watch.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Менять state внутри getter
• Вызывать computed как обычную функцию
• Заменять computed методом и терять кэширование