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

Основная разница — в типах данных, с которыми работают reactive и ref, и в способе доступа к значению. reactive принимает только объект (или массив) и возвращает глубоко реактивную прокси-обёртку — изменять свойства можно напрямую. ref может хранить любое значение (примитив, объект) и оборачивает его в объект-контейнер с единственным свойством .value. Для примитивов .value обязателен, для объектов ref внутри использует тот же reactive.

Ключевые моменты на практике:

• reactive нельзя использовать с примитивами — будет ошибка или значение не станет реактивным.
• ref универсален: для чисел, строк, булевых значений и объектов. В шаблоне .value автоматически разворачивается (только если ref не является свойством реактивного объекта).
• При деструктуризации reactive теряется реактивность:

  const state = reactive({ count: 0 });
  let { count } = state; // count — обычное число, не реактивное
  

  Чтобы сохранить реактивность, используют toRefs или оборачивают каждое поле в ref.
• ref при передаче в функцию или присваивании другой переменной сохраняет реактивность — достаточно везде обращаться через .value.

Пример выбора: если у вас плоский объект с несколькими полями, которые часто будут заменяться целиком (например, форма), удобнее ref: const form = ref({ login: '', password: '' }) — можно перезаписать form.value = { ... }, и реактивность сохранится. Для reactive перезапись всего объекта разорвёт связь — придётся изменять поля по отдельности.

Также стоит помнить, что реактивность ref для объектов достигается через reactive: ref({}) внутри создаёт reactive-прокси. Поэтому изменение вложенного поля obj.value.field = 'new' будет реактивным — так же, как и через reactive.