.value ve skriptu

Ref je jako krabička, ve které je hodnota. Ve skriptu krabičku otevřete pomocí .value, když hodnotu čtete, i když ji měníte:

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

const salky = ref(0);

function pridejSalek() {
    salky.value++;
}
</script>

<template>
    <p>Šálků kávy dnes: {{ salky }}</p>
    <p>{{ salky > 2 ? "Nedáte si příště čaj?" : "Dobrou chuť!" }}</p>
    <button @click="pridejSalek">Ještě jednu kávu</button>
</template>

V šabloně je to jen salky, bez .value, ve {{ }} stejně jako v podmínce. Vue v šabloně refy rozbalí: přečte jejich .value za vás. Refy se nejvíc používají právě v šabloně, takže nemusíte pořád dokola psát .value. Skript je ale obyčejný JavaScript a v něm je salky krabička, samotný ref.

A proč const, když se číslo mění? Protože salky je pořád stejná krabička, mění se jen to, co je uvnitř. salky.value++ mění vnitřek, a to const dovoluje. Nedovoluje dát něco jiného do samotné proměnné salky, a to stejně nikdy nechcete: Vue by o hodnotě přestalo vědět. Refy jsou proto vždycky const.

Typické chyby:

• salky++ ve skriptu, bez .value. Pokusí se změnit konstantu salky, takže konzole hlásí TypeError: Assignment to constant variable. a stránka zůstane, jaká byla.
• {{ salky.value }} v šabloně. Tam už Vue ref rozbalilo, takže salky je číslo a číslo žádné value nemá. Stránka na tom místě neukáže nic.
• console.log(salky) vypíše krabičku, něco jako RefImpl { dep: Dep { … }, __v_isRef: true, … _value: 2 }. Číslo uvidíte, když vypíšete salky.value.