Что такое shallowRef и shallowReactive и каково их назначение во Vue

Что проверяют

Понимаете ли вы устройство реактивности Vue: где ставится прокси, что именно отслеживается и сколько это стоит. Поверхностные варианты нужны ровно там, где полное отслеживание дорого или мешает, поэтому за определением обычно идёт просьба назвать случай из своей практики.

Как отвечать

Функция reactive оборачивает объект в Proxy, делая это лениво и рекурсивно: обращение к вложенному объекту возвращает такой же прокси. Функция ref хранит значение в поле value и для объектов внутри зовёт reactive.

shallowRef отслеживает только замену value целиком. shallowReactive отслеживает только собственные свойства первого уровня, вложенные объекты возвращаются сырыми, без прокси.

const a = shallowRef({ count: 0 })
a.value.count++          // эффекты не сработают
a.value = { count: 1 }   // сработают
triggerRef(a)            // уведомить вручную после мутации

const s = shallowReactive({ count: 0, user: { name: 'Ann' } })
s.count++                // сработает
s.user.name = 'Bob'      // не сработает

Где применяют: большие массивы и деревья, которые целиком заменяются ответом сервера; экземпляры сторонних библиотек вроде карты, редактора или графика, которые ломаются при оборачивании в прокси; горячие структуры, где обход виден в профиле.

Рядом стоит упомянуть markRaw: он навсегда исключает объект из реактивности, и для чужого экземпляра это часто честнее, чем shallowRef.

Где спотыкаются

Считают shallowRef реактивным на изменение полей внутри значения. Мутация вложенного поля не уведомит никого: либо заменяйте value целиком, либо зовите triggerRef, и второе стоит комментария в коде, иначе следующий разработчик уберёт его как лишнее.

Кладут объект в shallowReactive и ждут, что шаблон покажет изменения вложенной части. Вложенное значение возвращается сырым, и получается неприятная асимметрия: одна и та же структура реактивна на верхнем уровне и мертва на втором.

Берут поверхностные варианты для оптимизации до профилирования. Обычное отслеживание ленивое, платить приходится только за прочитанные ветки, и тормозит чаще не оно, а количество перерисовываемых компонентов и тяжёлые вычисляемые свойства.