> Что такое reactive и ref во Vue Composition API, для чего они нужны и чем отличаются? (Vue.js)

reactive и ref - это два основных инструмента Vue Composition API для создания реактивных данных. Они нужны, чтобы Vue отслеживал изменения переменных и автоматически обновлял интерфейс.

ref используется для примитивных значений (числа, строки, булевы) или для создания реактивной ссылки на объект. Он оборачивает значение в объект с единственным свойством .value, через которое происходит доступ и изменение. Например:
const count = ref(0) - доступ через count.value. В шаблоне .value раскрывается автоматически.

reactive предназначен для объектов (включая массивы и Map/Set). Он делает сам объект реактивным, без обёртки. Например:
const state = reactive({ name: 'Alice', age: 30 }) - свойства доступны напрямую: state.name. Однако при замене всего объекта реактивность теряется, поэтому для переприсваивания лучше использовать ref.

Главные отличия:

• ref работает с примитивами и требует .value в JavaScript (но не в шаблоне).

• reactive работает только с объектами, не требует .value, но не поддерживает примитивы и замену целиком.

• ref можно передавать в функции и сохранять реактивность, так как ссылка остаётся той же; reactive при деструктуризации теряет реактивность (нужен toRefs).

На практике часто используют ref для простых значений и reactive для сложных объектов, но оба инструмента взаимозаменяемы - выбор зависит от контекста.