Співбесіда Vue фокусується на системі реактивності, Composition API та звʼязку між компонентами. Нижче — найчастіші питання з еталонними відповідями. Middle: глибше розуміння, оптимізацію та реальні робочі ситуації.
Vue 3 загортає стан у Proxy, який перехоплює читання властивостей, щоб відстежити залежні від них ефекти, і запис, щоб ці ефекти запустити. На відміну від Object.defineProperty у Vue 2, Proxy бачить додавання й видалення властивостей і працює з масивами та Map, тому Vue.set більше не потрібен. Плата за це — вимога сучасних браузерів і втрата реактивності в момент, коли ви деструктуруєте значення з проксі.
computed виводить значення з іншого реактивного стану, кешує його і перераховує лише при зміні залежності — беріть його завжди, коли результат це значення, яке ви рендерите. watch виконує побічний ефект у відповідь на зміну: завантаження даних, запис у сховище, запуск анімації. Якщо всередині watcher ви присвоюєте змінну, майже напевно потрібен computed.
У Composition API це onBeforeMount і onMounted, onBeforeUpdate і onUpdated, onBeforeUnmount і onUnmounted, плюс onErrorCaptured, onActivated і onDeactivated для кешованих компонентів. Сам setup() замінює beforeCreate і created. В onMounted місце для доступу до DOM і підписок, а в onUnmounted їх обовʼязково треба зняти.
Слот — це місце в шаблоні дочірнього компонента, яке батько заповнює своєю розміткою, завдяки чому компоненти-обгортки стають перевикористовуваними. Scoped slot додатково передає дані назад з дитини у вміст слота — наприклад компонент списку сам займається завантаженням і перебором, а батько вирішує, як відмалювати кожен елемент. Це інвертує контроль: за поведінку відповідає дитина, за представлення — батько.
Дитина оголошує події через defineEmits і викликає emit з корисним навантаженням, а батько слухає їх через v-on. Для двостороннього звʼязування одного значення v-model це синтаксичний цукор над пропом і подією оновлення. Напряму змінювати проп не можна, бо це ламає односпрямований потік даних, який робить зміни стану відстежуваними.
Pinia — офіційна бібліотека стану для Vue 3: стори це звичайні функції зі state, getters і actions, а мутацій немає взагалі. Вона виводить типи TypeScript без ручних анотацій, за замовчуванням підтримує модульні стори замість вкладених модулів і працює і з Options, і з Composition API. Підсумок — менше шаблонного коду й набагато краща підтримка в редакторі, ніж у Vuex.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Middle Vue Frontend →