> В чем разница shallowRef и ref во Vue (Vue.js)

Основное различие между ref и shallowRef в Vue 3 заключается в глубине реактивности.

• ref создает глубокую реактивность. При передаче объекта, Vue рекурсивно оборачивает все его вложенные свойства в Proxy, делая изменения на любом уровне вложенности отслеживаемыми. Это удобно, но может быть затратно для больших или глубоких структур данных.

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

Пример:

JAVASCRIPT
import { ref, shallowRef } from 'vue'

const deep = ref({ user: { name: 'Alice' } })
const shallow = shallowRef({ user: { name: 'Bob' } })

// Глубокое изменение - сработает для ref
deep.value.user.name = 'Charlie' // компонент обновится

// Глубокое изменение - НЕ сработает для shallowRef
shallow.value.user.name = 'Dave' // компонент НЕ обновится

// Замена всего объекта - сработает для обоих
shallow.value = { user: { name: 'Eve' } } // компонент обновится

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

• ref - для большинства случаев, особенно с простыми данными или когда нужна полная реактивность.

• shallowRef - для оптимизации производительности с большими объектами (например, данные с сервера, которые меняются целиком), или когда вы сами управляете обновлениями через замену значения.