Питання на співбесіді з Vue з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Vue · Junior

1. Що таке Vue?

   Правильна відповідь: Прогресивний JavaScript-фреймворк для створення інтерфейсів, який можна впроваджувати поступово

   «Прогресивний» означає, що можна почати з покращення однієї сторінки й дорости до повноцінного SPA з роутингом (Vue Router), керуванням станом (Pinia) і SSR (Nuxt). Ядро бібліотеки зосереджене на шарі представлення та реактивності.

2. Який рекомендований спосіб створити новий проєкт Vue?

   Правильна відповідь: npm create vue@latest

   create-vue створює проєкт на Vite й за бажання додає TypeScript, Vue Router, Pinia, Vitest, ESLint та end-to-end тести. Старий Vue CLI (на webpack) перебуває в режимі підтримки.

3. Чим відрізняються Options API і Composition API?

   Правильна відповідь: Options API групує код за типом опції (data, methods); Composition API - за функціональністю, через імпортовані функції

   У Vue 3 підтримуються обидва. Composition API (зазвичай через <script setup>) спрощує перевикористання логіки через composables і виведення типів TypeScript; Options API досі підходить для простих компонентів.

4. Що робить {{ message }} у шаблоні Vue?

   Правильна відповідь: Інтерполяція тексту: виводить значення як екранований текст і оновлює його в разі зміни

   Синтаксис «вусів» виводить звичайний текст, тому захищений від XSS. Для виведення HTML потрібен v-html, якому ніколи не можна передавати недовірений контент.

Vue · Middle

1. Чим watchEffect відрізняється від watch?

   Правильна відповідь: watchEffect виконується одразу й відстежує все, що читає; watch лінивий, з явними джерелами й дає старе та нове значення

   watchEffect лаконічний, коли ефект використовує той самий стан, від якого залежить. watch дає точний контроль: спрацьовують лише вказані джерела, і його можна зробити immediate або once.

2. Що робить { deep: true } у спостерігача?

   Правильна відповідь: Викликає колбек за вкладених мутацій всередині об'єкта, за яким спостерігають, ціною його обходу

   Спостереження за reactive-об'єктом напряму за замовчуванням глибоке; за гетером - ні. Глибоке спостереження за великими структурами дороге - у 3.5 можна передати число, щоб обмежити глибину.

3. Коли shallowRef кращий за ref?

   Правильна відповідь: Для великих іммутабельних даних (наприклад, великих відповідей API), де оновлення має спричиняти лише заміна .value

   ref робить вкладені об'єкти глибоко реактивними через Proxy, що коштує часу для величезних структур. shallowRef відстежує лише заміну .value; використовуйте triggerRef, якщо мутуєте й треба примусово оновити.

4. Чому мутувати стан всередині гетера computed - помилка?

   Правильна відповідь: Гетери computed мають бути чистими; побічні ефекти роблять оновлення непередбачуваними й можуть спричинити нескінченні цикли

   Vue може викликати гетер будь-коли (або не викликати взагалі, якщо його ніхто не читає). Використовуйте спостерігач для побічних ефектів, а computed лишіть суто похідним.

Vue · Senior

1. Як Vue 3 відстежує реактивні залежності?

   Правильна відповідь: Пастки Proxy get записують ефект, що виконується, як підписника (track); пастки set сповіщають підписників (trigger)

   Ефекти (render-функції, computed, спостерігачі) реєструються під час виконання. Proxy також ловлять додавання/видалення властивостей і зміну індексів масиву, чого не вміли гетери/сетери Vue 2.

2. Чому reactive(obj) === obj хибне і чим це важливо?

   Правильна відповідь: reactive повертає Proxy; мутація вихідного об'єкта оминає відстеження, і UI не оновлюється

   Завжди працюйте з proxy. Повторний виклик reactive для того самого об'єкта повертає той самий proxy, а toRaw(proxy) віддає оригінал, коли потрібен доступ без відстеження.

3. Чому 100 змін стану в одному обробнику дають лише один перерендер?

   Правильна відповідь: Оновлення компонентів стають у чергу планувальника й виконуються один раз у мікрозадачі

   Кожна мутація запускає ефекти, але задачі рендера дедуплікуються в черзі. nextTick() повертає проміс цього скидання черги.

4. Що відбувається з Vue 3.4, коли computed перераховується в те саме значення?

   Правильна відповідь: Залежні не запускаються, бо значення computed порівнюються перед сповіщенням

   const isEven = computed(() => count.value % 2 === 0) більше не перезапускає наступні ефекти, коли count змінюється з 2 на 4. Повернення нового об'єкта щоразу й далі зводить це нанівець.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.