Расскажи про ref и reactive во Vue 3: отличия, когда использовать

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

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

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

Отличия:

• ref оборачивает примитив или объект в контейнер с .value.
• reactive работает только с объектами и возвращает прокси без дополнительного свойства.

Когда использовать:

• Если нужно реактивно хранить примитив — используйте ref.
• Если работаете с объектом или массивом и хотите реактивно отслеживать все изменения — reactive.

Пример:

import { ref, reactive } from 'vue';

const count = ref(0); // реактивное число
const state = reactive({ name: 'Vue', version: 3 }); // реактивный объект

count.value++;
state.version = 4;

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