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

ref и reactive — это два способа работы с реактивными данными в Vue 3.

ref:

• Обёртка для примитивов (числа, строки) или объектов.
• Возвращает реактивный объект с свойством .value.
• Автоматически распаковывается в шаблонах.

const count = ref(0);
count.value++; // изменяем через .value

reactive:

• Работает только с объектами (включая массивы).
• Возвращает реактивный прокси объекта.
• Не требует .value для доступа к свойствам.

const state = reactive({ count: 0 });
state.count++; // изменяем напрямую

Ключевые отличия:

1. ref универсален (любые типы), reactive — только объекты.
2. ref требует .value в JS, reactive — нет.
3. При деструктуризации reactive теряет реактивность, ref — сохраняет (если использовать toRefs).

Для простых значений удобнее ref, для сложных структур — reactive.