Что такое ref и reactive во Vue 3? В чём разница и как происходит обращение к значению?

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

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

• reactive создаёт реактивный прокси для объекта или массива, позволяя отслеживать изменения всех вложенных свойств.

Обращение к значению:

• Для ref нужно использовать .value, например:

  const count = ref(0);
  console.log(count.value);
  count.value++;
  

• Для reactive можно обращаться к свойствам напрямую:

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

Если передать ref внутрь шаблона Vue, .value не нужен — шаблон автоматически распаковывает ref.

Кратко:

• ref — реактивная обёртка для одиночного значения, доступ через .value.
• reactive — реактивный объект/массив, доступ к свойствам напрямую.