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

`ref` оборачивает любое значение (примитив или объект) в реактивную ссылку с полем .value, `reactive` делает реактивным сам объект через Proxy.

ref

import { ref } from 'vue';

const count = ref(0);
count.value += 1;      // в скрипте через .value
// в шаблоне: {{ count }} — .value подставляется автоматически

Работает с примитивами и позволяет заменить значение целиком.

reactive

import { reactive } from 'vue';

const state = reactive({ user: { name: 'Ann' }, items: [] });
state.user.name = 'Bob';   // без .value

Работает только с объектами, массивами, Map и Set.

Ограничения reactive

• Нельзя заменить объект целиком: state = {...} потеряет реактивность.
• Деструктуризация const { count } = state отключает связь, нужно toRefs(state).
• Не подходит для примитивов.

Что выбирать

Большинство команд используют ref для всего: одно правило и нет ловушек с потерей реактивности. reactive удобен для сгруппированного состояния формы.

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

ref хранит значение в .value и работает с любыми типами, reactive проксирует объект. Деструктуризацию reactive защищают через toRefs.