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

Короткий ответ

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

Подробное объяснение

ref и shallowRef - это API реактивности Vue 3, но с разной глубиной отслеживания изменений.

ref оборачивает значение в реактивный объект с глубоким проксированием. При передаче объекта или массива Vue рекурсивно делает реактивными все вложенные свойства. Любое изменение на любом уровне вложенности триггерит обновление компонента.

shallowRef создаёт реактивность только для самого значения, хранящегося в .value. Если в shallowRef помещён объект, изменение его внутренних свойств не будет отслеживаться. Обновление произойдёт только при замене всего значения целиком (присвоении нового объекта в .value).

Ключевое различие - в механизме отслеживания зависимостей. ref использует reactive внутри для объектов, а shallowRef использует shallowReactive. Это влияет на производительность: глубокое проксирование требует больше ресурсов, особенно для больших структур данных.

На практике

shallowRef применяется в следующих сценариях:

• Работа с большими массивами или объектами, где глубокое отслеживание избыточно
• Интеграция с внешними библиотеками, управляющими собственным состоянием (например, Three.js, Chart.js)
• Хранение неизменяемых (immutable) данных, которые заменяются целиком
• Оптимизация рендеринга при частых обновлениях, когда менять нужно только ссылку

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

Важно: shallowRef не делает содержимое объекта нереактивным для шаблона - если вы замените весь объект, шаблон обновится. Но мутации внутри объекта останутся незамеченными.

Пример кода

JAVASCRIPT
import { ref, shallowRef } from 'vue'

const deep = ref({ count: 0 })
const shallow = shallowRef({ count: 0 })

// Глубокая реактивность: изменение свойства триггерит обновление
deep.value.count++ // компонент обновится

// Поверхностная реактивность: изменение свойства НЕ триггерит обновление
shallow.value.count++ // компонент НЕ обновится

// Только замена всего значения триггерит обновление
shallow.value = { count: 10 } // компонент обновится

Как отвечать на собеседовании

Начни с чёткого определения разницы в глубине реактивности. Приведи конкретный пример с объектом и покажи, когда shallowRef не реагирует на мутации. Объясни, почему это важно для производительности - избегание глубокого проксирования больших структур. Упомяни типичные use cases: интеграция с внешними библиотеками, immutable данные, оптимизация. Подчеркни, что выбор между ref и shallowRef - это trade-off между удобством глубокой реактивности и производительностью.

Что проверяет интервьюер

• Понимание внутреннего механизма реактивности Vue 3 (Proxy, глубокое vs поверхностное отслеживание)
• Умение выбирать правильный инструмент под задачу, а не использовать ref везде
• Знание оптимизационных техник и профилирования производительности
• Понимание разницы между мутацией объекта и заменой ссылки
• Осведомлённость о связанных API: shallowReactive, triggerRef, customRef

Типичные ошибки

• Думать, что shallowRef делает объект полностью нереактивным - это не так, замена значения работает
• Использовать shallowRef для примитивов - это бессмысленно, так как примитивы и так не имеют вложенности
• Пытаться мутировать свойства объекта внутри shallowRef и ждать обновления UI
• Забывать, что shallowRef не делает глубокое копирование - объект остаётся тем же самым, просто без прокси
• Путать shallowRef с readonly или shallowReadonly - это разные концепции