Middle Vue Frontend — Вопросы на собеседовании Vue

Что такое composable и когда он лучше миксина?

Функция, использующая реактивность Vue и возвращающая состояние с поведением: useUser, usePagination. Лучше миксина тем, что источник каждого значения виден в месте вызова: два миксина могут объявить одно имя, и ни один файл об этом не скажет. Composable ещё и композируются, ради чего название и выбрано.

Почему деструктуризация `reactive`-объекта его ломает?

Потому что реактивность живёт в прокси, а вынимание примитива копирует значение прочь от прокси. Шаблон затем рисует число, которое никогда не обновляется. toRefs это лечит, превращая каждое свойство в ref, сохраняющий связь, — поэтому возврат toRefs(state) из composable и стал обычной формой.

Как управлять общим состоянием, не берясь за стор?

Composable с состоянием на уровне модуля — это стор во всех смыслах, и большинству приложений его хватает. Pinia оправдана, когда нужны devtools, состояние, безопасное для SSR, или плагины, — и когда несколько фич пишут одно состояние и вы хотите видеть этот трафик в одном месте. Provide и inject решают другую задачу: передачу вниз по дереву без прокидывания пропсов.

Отчего случается лишняя перерисовка и как её увидеть?

От зависимости, которая меняется чаще, чем результат: объект, пересоздаваемый в отрисовке родителя, или computed, читающий больше состояния, чем использует. Devtools подсвечивают компоненты в момент обновления, и догадки превращаются в наблюдение. v-memo существует для редкого случая, когда сама отрисовка действительно дорога.

Чем SSR отличается от SSG в терминах Nuxt?

SSR рендерит на каждый запрос, поэтому содержимое актуально, а сервер работает на каждого посетителя. SSG рендерит во время сборки и отдаёт статику — быстрее и дешевле, но устаревает до следующей сборки. Выбор делается на маршрут, а не на приложение, и маркетинговая страница с дашбордом редко хотят одного и того же.

Как разумно тестировать компонент Vue?

Отрисовать его и проверять то, что увидел бы пользователь, через Testing Library или Vue Test Utils. Проверять поведение — нажатие показывает вот это, — а не внутреннее состояние, потому что внутреннее состояние и меняет рефакторинг. Сеть мокать на уровне запроса, а не методов компонента, иначе тест зелёный, а интеграция сломана.