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

Как работает реактивность в Vue 3? Что делает Proxy под капотом?

Vue 3 оборачивает состояние в Proxy, который перехватывает чтение свойств, чтобы отследить зависящие от них эффекты, и запись, чтобы эти эффекты запустить. В отличие от Object.defineProperty во Vue 2, Proxy видит добавление и удаление свойств и работает с массивами и Map, поэтому Vue.set больше не нужен. Плата за это — требование современных браузеров и потеря реактивности в момент, когда вы деструктурируете значения из прокси.

Объясните разницу между computed и watch.

computed выводит значение из другого реактивного состояния, кеширует его и пересчитывает только при изменении зависимости — берите его всегда, когда результат это значение, которое вы рендерите. watch выполняет побочный эффект в ответ на изменение: загрузка данных, запись в хранилище, запуск анимации. Если внутри watcher вы присваиваете переменную, почти наверняка нужен computed.

Назовите хуки жизненного цикла во Vue 3.

В Composition API это onBeforeMount и onMounted, onBeforeUpdate и onUpdated, onBeforeUnmount и onUnmounted, плюс onErrorCaptured, onActivated и onDeactivated для кешируемых компонентов. Сам setup() заменяет beforeCreate и created. В onMounted место для доступа к DOM и подписок, а в onUnmounted их обязательно нужно снять.

Что такое слоты? Приведите пример scoped slot.

Слот — это место в шаблоне дочернего компонента, которое родитель заполняет своей разметкой, благодаря чему компоненты-обёртки становятся переиспользуемыми. Scoped slot дополнительно передаёт данные обратно из ребёнка в содержимое слота — например компонент списка сам занимается загрузкой и перебором, а родитель решает, как отрисовать каждый элемент. Это инвертирует контроль: за поведение отвечает ребёнок, за представление — родитель.

Как передать данные от дочернего компонента к родительскому?

Ребёнок объявляет события через defineEmits и вызывает emit с полезной нагрузкой, а родитель слушает их через v-on. Для двустороннего связывания одного значения v-model это синтаксический сахар над пропсом и событием обновления. Напрямую менять проп нельзя, потому что это ломает однонаправленный поток данных, который делает изменения состояния отслеживаемыми.

Что такое Pinia и чем она лучше Vuex?

Pinia — официальная библиотека состояния для Vue 3: сторы это обычные функции со state, getters и actions, а мутаций нет вовсе. Она выводит типы TypeScript без ручных аннотаций, по умолчанию поддерживает модульные сторы вместо вложенных модулей и работает и с Options, и с Composition API. Итог — меньше шаблонного кода и намного лучшая поддержка в редакторе, чем у Vuex.