Вычисляемые значения

Некоторые значения на странице — не отдельные данные, а вычисляются из других данных. Сумма заказа зависит от цен того, что в него входит, и когда заказ меняется, сумма тоже должна измениться. Для таких значений в Vue есть вычисляемые значения:

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

const cups = ref(2);
const price = computed(() => cups.value * 3);
</script>

<template>
    <p>Чашек кофе: {{ cups }}. Стоимость: €{{ price }}.</p>
    <button @click="cups++">Ещё одна</button>
</template>

Страница показывает Чашек кофе: 2. Стоимость: €6., а после нажатия на кнопку — Чашек кофе: 3. Стоимость: €9. В computed() вы передаёте функцию, которая вычисляет значение и возвращает его. Vue запускает функцию и запоминает результат. Когда реф, который функция читает (здесь cups), меняется, Vue запускает её снова и обновляет страницу. Сами вы price никогда не задаёте.

Вычисляемое значение используют так же, как реф. В шаблоне вы пишете его имя: {{ price }}. В скрипте добавляете .value, в том числе внутри другого вычисляемого значения:

const withTip = computed(() => price.value + 1);

Как и ref, computed берётся из Vue, поэтому его нужно указать в строке import: import { computed, ref } from "vue"; (в этом курсе имена идут в алфавитном порядке). Без этого страница остаётся пустой, а в консоли появляется ReferenceError: computed is not defined.

Функция может быть сколь угодно длинной, с циклами и условиями, лишь бы в конце она возвращала значение. И нужна она только для того, чтобы вычислить значение: вычисляемое значение изменить нельзя. price.value = 10; ничего не меняет, а в консоли появляется [Vue warn]: Write operation failed: computed value is readonly. Чтобы получить другую цену, меняйте то, из чего она вычисляется, — cups.

В этом упражнении заказ кафе — это массив позиций со свойством count. Если позиция уже есть в заказе, addToOrder() прибавляет к её count единицу, а если нет — добавляет её с count: 1.

Типичные ошибки:

• Забыть .value в скрипте: total >= 10 сравнивает само вычисляемое значение, а не число в нём, и условие никогда не выполняется.
• Забыть return: тогда функция ничего не возвращает, и на странице на месте значения ничего нет.