Composition API
Setup function, ref, reactive, computed, watch, lifecycle hooks, composables, script setup
1What is the Composition API in Vue 3?
What is the Composition API in Vue 3?
Answer
The Composition API is a new way to organize Vue component logic using composition functions instead of options (data, methods, computed). It allows grouping logic by feature rather than by option type, facilitating code reuse through composables. It also provides better TypeScript support and better organization for complex components.
2What is the main function used in the Composition API to define a component's logic?
What is the main function used in the Composition API to define a component's logic?
Answer
The setup() function is the entry point of the Composition API. It executes before component creation, even before created(). It receives props and context as arguments and must return an object containing data and functions to expose to the template. It's in setup() where we use ref, reactive, computed, watch and the Composition API lifecycle hooks.
3What is the main difference between ref() and reactive()?
What is the main difference between ref() and reactive()?
Answer
ref() creates a reactive reference for a primitive value or object, accessible via .value in script (but auto-unwrapped in templates). reactive() creates a reactive proxy for objects and arrays only, without requiring .value but loses reactivity if destructured. ref() is more versatile for primitives, reactive() is more natural for complex objects but requires toRef/toRefs for destructuring.
How to access the value of a ref in the setup() function?
How to create a computed property in the Composition API?
+21 interview questions
Other Vue.js / Nuxt.js interview topics
JavaScript Fundamentals
Modern JavaScript (ES6+)
Vue Basics
Vue Components
Vue Router
Pinia State Management
Vuex (Legacy)
Vue Reactivity
Nuxt Fundamentals
Nuxt Data Fetching
Nuxt SSR & SSG
Nuxt Server Routes
Nuxt Modules
Vue Composables
Vue Forms & Validation
Nuxt State Management
Vue Testing
Nuxt Deployment & CI/CD
Vue Performance
Vue Advanced Patterns
TypeScript with Vue
Nuxt Authentication
SEO with Nuxt
Nuxt Internationalization
Vue Architecture
Nuxt Security
Vue Ecosystem
Migration Vue 2→3 & Nuxt 2→3
Master Vue.js / Nuxt.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free