В Vue 3 ref и reactive — это два способа создания реактивных данных, но они отличаются по назначению и типу данных, с которыми работают.

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

Пример:

import { ref, reactive } from 'vue';

const count = ref(0); // реактивное примитивное значение
count.value++;

const state = reactive({
  count: 0
});
state.count++;

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

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

В шаблонах Vue автоматически распаковывает ref, поэтому можно писать просто {{ count }}, а в коде нужно обращаться к .value.

Итого:

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

Чем отличается ref от reactive во Vue 3?