Объекты в рефах

Реф может хранить и объект, который собирает связанные вещи в одном месте. Вот заказ с именем посетителя и пожеланием:

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

const order = ref({
    name: "Анна",
    note: "",
    items: ["Эспрессо"],
});

function addNote() {
    order.value.note = "Без сахара, пожалуйста.";
}
</script>

<template>
    <p>{{ order.name }}: {{ order.items.join(", ") }}</p>
    <p>Пожелание: {{ order.note }}</p>
    <button @click="addNote">Без сахара</button>
</template>

В скрипте order.value — это объект, а order.value.note — одно из его свойств. Измените свойство, и Vue заново отрисует страницу, как и при изменении самого .value. Vue замечает изменения и глубже: order.value.items.push("Мятный чай") добавляет элемент в массив внутри объекта, и страница это показывает. В шаблоне, как всегда, пишут order.note и order.items без .value.

В других учебниках вам может встретиться ещё одна функция Vue, reactive(). Она делает объект реактивным без коробки вокруг него, так что и в скрипте пишут order.note:

import { reactive } from "vue";

const order = reactive({ name: "Анна", note: "" });
order.note = "Без сахара, пожалуйста.";

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