Question 1

Яка основна різниця між var і let у JavaScript?

Accepted Answer

Фундаментальна різниця полягає у scope змінних. let має block scope, тобто змінна, оголошена через let, існує лише в межах блоку, де вона визначена (між фігурними дужками). var має function scope, що може спричиняти неочікувану поведінку, оскільки змінна доступна за межами блоку. Ця різниця у scope робить let рекомендованим вибором для уникнення помилок, пов'язаних із hoisting та scope.

Question 2

Що таке Promise у JavaScript?

Accepted Answer

Promise — це об'єкт, що представляє остаточне завершення або невдачу асинхронної операції. Він дозволяє обробляти операції, що потребують часу (HTTP-запити, читання файлів), не блокуючи виконання коду. Promise може мати три стани: pending (очікування), fulfilled (успішно виконано) або rejected (завершено з помилкою).

Question 3

Що таке екземпляр Vue?

Accepted Answer

Екземпляр Vue — це об'єкт, створений викликом createApp(), який представляє застосунок. Цей кореневий об'єкт містить усі реактивні дані, методи та параметри конфігурації. Він слугує точкою входу для монтування застосунку до елемента DOM та ініціалізації системи реактивності Vue.

Question 4

Що таке компонент Vue?

Accepted Answer

Компонент Vue — це повторно використовуваний екземпляр Vue з іменем. Він інкапсулює HTML, CSS і JavaScript в незалежну логічну одиницю. Компоненти дозволяють розділити інтерфейс користувача на повторно використовувані та зручні в підтримці частини. Кожен компонент має власний template, логіку та стилі, що полегшує організацію коду та повторне використання.

Question 5

Яка мінімально необхідна структура для застосунку Nuxt 3?

Accepted Answer

Застосунку Nuxt 3 потрібен лише файл app.vue або каталог pages/ у корені проєкту. Якщо app.vue існує без папки pages/, Nuxt створює застосунок без Vue Router. Якщо pages/ існує, Nuxt автоматично вмикає file-based routing і потребує <NuxtPage /> в app.vue для відображення маршрутів.

Question 6

Яка основна різниця між useFetch і useAsyncData у Nuxt?

Accepted Answer

useFetch — це обгортка навколо useAsyncData і $fetch, яка спрощує типові виклики API. Вона автоматично обробляє побудову URL і приймає URL безпосередньо як перший аргумент, тоді як useAsyncData потребує унікального ключа та власної функції fetcher. Використовуйте useFetch для простих викликів API, а useAsyncData — для складної логіки fetching.

Question 7

Що таке Server-Side Rendering (SSR) у Nuxt?

Accepted Answer

SSR генерує повний HTML на сервері з кожним запитом, а потім надсилає його клієнту. Це покращує SEO, оскільки пошукові системи отримують одразу доступний HTML-контент, а також скорочує час до першого відображення (first paint). SSR є типовим режимом рендерингу в Nuxt 3, на відміну від клієнтського рендерингу, де JavaScript генерує контент у браузері.

Question 8

Що таке Virtual DOM у Vue?

Accepted Answer

Virtual DOM — це легке JavaScript-представлення реального дерева DOM. Vue використовує Virtual DOM, щоб мінімізувати прямі маніпуляції з DOM, які є витратними з точки зору продуктивності. Коли стан змінюється, Vue створює новий Virtual DOM, порівнює його зі старим (алгоритм diffing), а потім застосовує до реального DOM лише необхідні зміни. Цей підхід значно зменшує кількість операцій з DOM і покращує продуктивність, особливо для складних застосунків з великою кількістю оновлень.

Question 9

Яка основна мета provide/inject у Vue 3?

Accepted Answer

Provide/inject дозволяє передавати дані від батьківського компонента до будь-якого нащадкового компонента без передавання props через кожен проміжний рівень. Це дозволяє уникнути 'props drilling', коли props доводиться передавати через кілька рівнів компонентів, які їх не потребують. Особливо корисно для спільного використання глобальних даних, як-от конфігурація теми чи стан автентифікації.

Question 10

Яка основна роль defineComponent у Vue 3 з TypeScript?

Accepted Answer

defineComponent вмикає type inference TypeScript для опцій компонента. Без цієї функції контекст this в Options API трактувався б як any. Вона гарантує, що props, data, computed та методи автоматично отримують правильні типи.

Питання зі співбесід з Vue.js / Nuxt.js

Готовий до співбесіди з Vue.js / Nuxt.js?

Дослідити всі теми Vue.js / Nuxt.js

Основи JavaScript

Сучасний JavaScript (ES6+)

Основи Vue

Компоненти Vue

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Реактивність Vue

Основи Nuxt

Отримання даних у Nuxt

SSR і SSG у Nuxt

Серверні маршрути Nuxt

Модулі Nuxt

Composables у Vue

Форми та валідація Vue

Керування станом у Nuxt

Тестування Vue

Розгортання Nuxt та CI/CD

Продуктивність Vue

Просунуті патерни Vue

TypeScript із Vue

Автентифікація Nuxt

SEO з Nuxt

Інтернаціоналізація Nuxt

Архітектура Vue

Безпека Nuxt

Екосистема Vue

Міграція Vue 2→3 та Nuxt 2→3

Опануй Vue.js / Nuxt.js для наступної співбесіди