Співбесіда Vue фокусується на системі реактивності, Composition API та звʼязку між компонентами. Нижче — найчастіші питання з еталонними відповідями. Senior: архітектуру, трейд-офи, менторство та прийняття рішень.
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.
v-if додає або видаляє елемент з DOM, тому платить за монтування й розмонтування, але нічого не рендерить при false — підходить для вмісту, що перемикається рідко або дорогий у відмальовуванні. v-show завжди рендерить елемент і перемикає CSS display, тож перемикання дешеве, але компонент створюється завжди. v-show беруть для того, що перемикається часто, наприклад випадного меню.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Senior Vue Frontend →