Composition API
Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup
1Що таке Composition API у Vue 3?
Що таке Composition API у Vue 3?
Відповідь
Composition API — це новий спосіб організації логіки компонентів Vue за допомогою функцій композиції замість options (data, methods, computed). Він дозволяє групувати логіку за функціональністю, а не за типом опції, що полегшує повторне використання коду через composables. Він також забезпечує кращу підтримку TypeScript і кращу організацію складних компонентів.
2Яка основна функція використовується в Composition API для визначення логіки компонента?
Яка основна функція використовується в Composition API для визначення логіки компонента?
Відповідь
Функція setup() — це точка входу Composition API. Вона виконується перед створенням компонента, навіть раніше за created(). Вона отримує props і контекст як аргументи й повинна повертати об'єкт, що містить дані та функції для надання template. Саме в setup() ми використовуємо ref, reactive, computed, watch і lifecycle hooks Composition API.
3Яка основна різниця між ref() та reactive()?
Яка основна різниця між ref() та reactive()?
Відповідь
ref() створює реактивне посилання для примітивного значення або об'єкта, доступне через .value у скрипті (але автоматично розгортається в template). reactive() створює реактивний proxy лише для об'єктів і масивів, не потребуючи .value, але втрачає реактивність при деструктуризації. ref() універсальніший для примітивів, reactive() природніший для складних об'єктів, але вимагає toRef/toRefs для деструктуризації.
Як отримати доступ до значення ref у функції setup()?
Як створити обчислювану властивість (computed) у Composition API?
+21 питань зі співбесід
Інші теми співбесід Vue.js / Nuxt.js
Основи JavaScript
Сучасний JavaScript (ES6+)
Основи Vue
Компоненти Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Реактивність 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 для наступної співбесіди
Отримай доступ до всіх питань, flashcards, технічних тестів, вправ code review та симуляторів співбесід.
Почни безкоштовно