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

Question

Accepted Answer

Оба создают **реактивное состояние** в Composition API, но работают по-разному. `ref` оборачивает **любое** значение (включая примитивы) в реактивный контейнер; `reactive` делает **объект** глубоко реактивным напрямую. ## ref — для любого значения, доступного через .value ```vue ``` Главная особенность: в JavaScript вы получаете доступ к ref через `.value`; в шаблоне Vue автоматически разворачивает. Забыть `.value` в скрипте — это самая распространенная ошибка новичков. ## reactive — для объектов, без .value ```vue ``` `reactive` работает только с объектами/массивами (не с примитивами) и вы используете свойства напрямую. ## Подвох с reactive: не деструктурируйте и не переназначайте ```js let state = reactive({ count: 0 }); state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy) const { count } = state; // ❌ destructuring loses reactivity ``` Переназначение объекта `reactive` или деструктурирование его свойств **отключает** реактивность — частая ошибка. `ref` не имеет этой проблемы (вы переназначаете `.value`). ## Что использовать ```text ref → primitives, and the recommended default (works for everything, easy to reassign) reactive→ when you want a grouped object of state without .value (but mind destructuring) ``` Много команд стандартизируют на **`ref` везде** для консистентности. ## Почему это важно `ref` и `reactive` — основа реактивного состояния Composition API Vue 3. Понимание того, что `ref` требует `.value` в скрипте (автоматически разворачивается в шаблонах) и что `reactive` теряет реактивность при переназначении/деструктурировании, предотвращает две наиболее распространенные ошибки реактивности в Vue.