Співбесіда Vue фокусується на системі реактивності, Composition API та звʼязку між компонентами. Нижче — найчастіші питання з еталонними відповідями. Junior: базова теорія, визначення та прості практичні кейси.
ref загортає будь-яке значення, включно з примітивами, в обʼєкт із властивістю .value, тоді як reactive повертає Proxy і працює лише з обʼєктами. ref переживає деструктуризацію та переприсвоєння, а reactive ні: деструктуризація реактивного обʼєкта віддає звичайні значення, що втрачають реактивність. Загальна порада — за замовчуванням брати ref і тягнутися до reactive лише для тісно повʼязаної групи полів.
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 це синтаксичний цукор над пропом і подією оновлення. Напряму змінювати проп не можна, бо це ламає односпрямований потік даних, який робить зміни стану відстежуваними.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Junior Vue Frontend →