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

В чём разница между ref и reactive? Когда выбрать каждый?

ref оборачивает любое значение, включая примитивы, в объект со свойством .value, тогда как reactive возвращает Proxy и работает только с объектами. ref переживает деструктуризацию и переприсваивание, а reactive нет: деструктуризация реактивного объекта отдаёт обычные значения, теряющие реактивность. Общий совет — по умолчанию брать ref и тянуться к reactive только для тесно связанной группы полей.

Как работает реактивность в 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 это синтаксический сахар над пропсом и событием обновления. Напрямую менять проп нельзя, потому что это ломает однонаправленный поток данных, который делает изменения состояния отслеживаемыми.