Vue: Options API vs. Composition API
Options API organizes Vue components by property type (data, methods). Composition API organizes them by logical feature. Use Composition API for complex components with tangled logic or for creating reusable 'composable' functions.
Why it exists
In large Vue components, related pieces of logic—like fetching data, handling loading states, and managing errors—often become scattered across different sections of the component's options (data, methods, mounted). The Composition API was created to solve this by allowing developers to group code by logical concern, not by option type, and to enable clean, powerful logic reuse.
The mental model
Think of it as organizing a filing cabinet. The Options API is like organizing by document type: one drawer for all invoices, one for all contracts, one for all memos. The Composition API is like organizing by project: one folder contains the invoice, contract, and memos for 'Project Alpha', making it easy to see everything related to that single concern.
How it works
The Options API uses a single exported object with properties like data, methods, and computed. Vue reads this structure to build the component. The Composition API uses a setup function (or <script setup>) where you import and use functions like ref() for reactive state, onMounted() for lifecycle hooks, and watch() for watchers. This allows you to declare and group these reactive parts anywhere within setup, typically by feature.
When to use it
Use the Composition API for complex components, when you need to extract and reuse stateful logic across multiple components (via 'composables' like useFetch), or when you need better TypeScript inference. Use the Options API for simpler components, when teaching Vue to beginners, or when a component's logic is self-contained and straightforward.
When not to use it
Using the Composition API can be overkill for simple, presentational components where its organizational benefits are negligible. The Options API becomes a liability in large components where tracking a single feature requires jumping between the data, methods, and watch sections, making the code harder to reason about and refactor.
One canonical example
Imagine a feature for fetching user data. With the Options API, user, isLoading, and error would be in the data object, the fetchUser function in methods, and the call to it in the mounted hook. The logic is fragmented. With the Composition API, you can create a useUser composable that groups the user ref, isLoading ref, error ref, and the fetchUser function all in one place. The component then simply calls const { user, isLoading, error } = useUser() to get all the related logic, which is now co-located and reusable.
Interview question
When developing a complex Vue component with intertwined logic for a single feature (e.g., data fetching and its related states), which API is generally preferred and why?
- a.Composition API, because it enables grouping all related logic for a feature together, enhancing co-location and reusability.Correct
- b.Options API, as its clear separation of data, methods, and computed properties simplifies debugging in large components.
- c.Options API, because it offers superior TypeScript inference and type safety for intricate component structures.
- d.Composition API, as it primarily focuses on managing global application state rather than local component state.
Why? this is the answer
The Composition API is preferred for complex components because it allows grouping all related logic for a specific feature, like data fetching and its states, in one place, improving co-location and reusability. The Options API, conversely, tends to scatter such related logic across different sections (data, methods, mounted), making complex components harder to manage and debug.
Just read this? Test yourself on what you have been reading.
Read the original → vuejs.org
- #vue
- #frontend
- #javascript
- #frameworks
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on vue — each one lists the topics its interview covers.
See open roles