Расскажите про реактивность во Vue: на чём она основана и как мы с ней взаимодействуем (Reactive, Ref, ShallowReactive, ShallowRef)?

Во Vue 3 реактивность реализована через Composition API с использованием функций reactive, ref, shallowReactive и markRaw.

• reactive(obj) — создаёт реактивный прокси для объекта obj. Все вложенные свойства становятся реактивными, изменения отслеживаются и вызывают обновления компонентов.
• ref(value) — создаёт реактивный объект с единственным свойством .value. Используется для примитивных значений (числа, строки) или когда нужно реактивно отслеживать отдельное значение.
• shallowReactive(obj) — создаёт реактивный прокси, но только первого уровня. Вложенные объекты не становятся реактивными, что полезно для оптимизации, если глубина вложенности не важна.
• markRaw(obj) — помечает объект как "сырой", то есть Vue не будет делать его реактивным. Используется для объектов, которые не должны отслеживаться, например, сторонние библиотеки или большие структуры данных.

Пример:

import { reactive, ref, shallowReactive, markRaw } from 'vue';

const state = reactive({
  count: 0,
  nested: { value: 10 }
});

const number = ref(5);

const shallow = shallowReactive({ nested: { value: 20 } });

const rawObj = markRaw(new Map());

state.count++; // реактивно
number.value = 10; // реактивно
shallow.nested.value = 30; // НЕ реактивно
rawObj.set('key', 'value'); // Vue не отслеживает изменения