В чём разница между ref и reactive?

ref и reactive — два способа объявить реактивное состояние в Vue 3 Composition API.

Vue 3: ref

import { ref } from 'vue';

const count = ref(0);       // любое значение, включая примитивы
count.value += 1;           // доступ через .value

• Оборачивает любое значение (примитив или объект) в реактивный контейнер { value }.
• В шаблоне разворачивается автоматически ({{ count }}), в коде — через .value.
• Ссылку можно заменять целиком: items.value = newArray — реактивность сохранится.

Vue 3: reactive

import { reactive } from 'vue';

const state = reactive({ count: 0, user: { name: 'Аня' } });
state.count += 1;           // прямой доступ, без .value

• Работает только с объектами (Proxy-обёртка): глубокая реактивность полей.
• Без .value — обращение как к обычному объекту.
• Ограничения: нельзя заменить объект целиком (state = {...} теряет реактивность) и деструктуризация разрывает связь (const { count } = state — count больше не реактивен; нужен toRefs).

Отличия

• Типы: ref — всё; reactive — только объекты.
• Доступ: .value против прямого.
• Замена значения: ref — можно; reactive — нельзя.
• Деструктуризация: ref сохраняет реактивность контейнера; reactive — теряет без toRefs.

Практика Vue-сообщества: по умолчанию ref (единообразие, меньше ловушек), reactive — для групп связанных полей.

Отличие от React

В React реактивность иная: useState возвращает снимок+сеттер (обновление через вызов функции), useRef — нереактивный контейнер. Прямых аналогов ref/reactive нет — похожая модель есть в Solid (сигналы).

Коротко для собеседования

Это Vue 3: ref оборачивает любое значение в реактивный { value } (можно заменять целиком), reactive делает объект глубоко реактивным Proxy (без .value, но нельзя заменить объект и деструктурировать без toRefs). В React ref (useRef) — нереактивное хранилище, а реактивность даёт useState.