Версия источника: 4880e8b4372c96001c2e052be28b68a95d31252b
Синхронизировано: 2026-11-09T11:15:07.649Z
Источник: https://github.com/sergey-from-riders/vibecoding-base/tree/4880e8b4372c96001c2e052be28b68a95d31252b

<a id="frameworks-vue-computed"></a>

# Vue: computed и производное состояние

## Коротко

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

## Плохо

```typescript
const total = ref(0);
watch(items, () => { total.value = sum(items.value); });
```

## Хорошо

```typescript
import { computed } from 'vue';
const total = computed(() => sum(items.value));
```

## Почему

Отдельное изменяемое total может отстать от исходных данных. computed описывает зависимость напрямую.

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

Vue 3 Composition API. items — ref, sum — чистая функция. Watch остаётся подходящим инструментом для побочных действий; денежная арифметика требует точного представления.

## Человек

Определяет формулу итоговой суммы и округление.

## Агент

Выносит чистое вычисление в computed и проверяет изменение элементов.

## Пример применения

Корзина хранит позиции и количество. Итог вычисляется из них; сервер повторно рассчитывает стоимость перед оплатой.

## Как проверить

- Изменение количества обновляет итог.
- Вычисление не изменяет исходные данные.

## Источники

- [Computed Properties](https://vuejs.org/guide/essentials/computed.html)

Уровень: Рекомендуется. Проверено: 2026-11-09. Изменено: 2026-11-09.

[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/4880e8b4372c96001c2e052be28b68a95d31252b/registry/standards/frameworks/platforms/rules/vue-computed.md)