.value в скрипте

Реф похож на коробку со значением внутри. В скрипте коробку открывают с помощью .value, и чтобы прочитать значение, и чтобы изменить его:

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

const cups = ref(0);

function addCup() {
    cups.value++;
}
</script>

<template>
    <p>Чашек сегодня: {{ cups }}</p>
    <p>{{ cups > 2 ? "Может, теперь чаю?" : "Приятного кофе!" }}</p>
    <button @click="addCup">Ещё один кофе</button>
</template>

В шаблоне пишут просто cups, без .value, и в {{ }}, и в условии. Vue распаковывает рефы в шаблоне: сам читает их .value. Чаще всего рефы используют именно в шаблоне, так что вам не приходится писать .value снова и снова. А вот скрипт — это обычный JavaScript, и там cups — коробка, сам реф.

А почему const, если число меняется? Потому что cups остаётся той же самой коробкой; меняется только то, что внутри. cups.value++ меняет содержимое, а это const разрешает. Запрещает же const положить в сам cups что-то другое, а этого вам и не нужно: Vue потерял бы реф из виду. Поэтому рефы всегда объявляют через const.

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

• cups++ в скрипте, без .value. Это попытка изменить константу cups, поэтому консоль пишет TypeError: Assignment to constant variable., а страница остаётся прежней.
• {{ cups.value }} в шаблоне. Vue уже распаковал реф, так что cups — это число, а у числа нет value. На этом месте страница ничего не показывает.
• console.log(cups) выводит саму коробку, что-то вроде RefImpl { dep: Dep { … }, __v_isRef: true, … _value: 2 }. Чтобы увидеть число, выведите cups.value.