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

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

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

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

Пример:

import { ref, reactive } from 'vue';

const count = ref(0); // число, доступ через count.value
const state = reactive({
  name: 'Vue',
  items: [1, 2, 3]
});

count.value++;
state.name = 'Vue 3';
state.items.push(4);

Итого:

• ref для примитивов или одиночных значений
• reactive для объектов и массивов

Оба создают реактивные данные, которые Vue отслеживает для обновления UI.