Options API
E559082
The Options API is Vue.js’s original component syntax style that organizes component logic by option properties like data, methods, and computed rather than by logical feature groupings.
Statements (49)
| Predicate | Object |
|---|---|
| instanceOf |
Vue.js API
ⓘ
Vue.js component syntax style ⓘ |
| alsoKnownAs | Options-based API ⓘ |
| backwardsCompatibility | maintained for existing Vue 2 applications migrating to Vue 3 ⓘ |
| codeOrganizationPattern | option-type-based organization ⓘ |
| comparedToCompositionAPI | less flexible for advanced type inference ⓘ |
| configurationStyle | object-based configuration ⓘ |
| contrastsWith | Composition API NERFINISHED ⓘ |
| defaultStyleFor | many legacy Vue.js codebases ⓘ |
| definesComponentUsing | export default object syntax ⓘ |
| designGoal | simple mental model for component authors ⓘ |
| discourages | grouping logic by feature within a single option block ⓘ |
| documentationStatus | still documented in official Vue 3 docs ⓘ |
| encourages | separation of concerns by option type ⓘ |
| exampleSyntax | export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } } ⓘ |
| introducedIn | Vue 2 NERFINISHED ⓘ |
| learningCurve | considered beginner-friendly ⓘ |
| limitations |
harder to reuse logic across components compared to Composition API
ⓘ
logic for a single feature can be scattered across multiple options ⓘ |
| organizesLogicBy |
computed option
ⓘ
data option ⓘ lifecycle hook options ⓘ methods option ⓘ option properties ⓘ watch option ⓘ |
| partOf | Vue.js NERFINISHED ⓘ |
| primaryUseCase | small to medium-sized Vue components ⓘ |
| statusInVueEcosystem | stable and not deprecated as of Vue 3 ⓘ |
| supportedIn |
Vue 2
NERFINISHED
ⓘ
Vue 3 NERFINISHED ⓘ |
| supports | TypeScript with class-component patterns via community libraries ⓘ |
| usedWith |
Single File Components (SFCs)
NERFINISHED
ⓘ
global component registration in Vue 2 style ⓘ |
| usesProperty |
components
ⓘ
computed ⓘ data ⓘ directives ⓘ emits ⓘ filters ⓘ inject ⓘ lifecycle hooks like created ⓘ lifecycle hooks like mounted ⓘ lifecycle hooks like unmounted ⓘ lifecycle hooks like updated ⓘ methods ⓘ mixins ⓘ props ⓘ provide ⓘ watch ⓘ |
Referenced by (1)
Full triples — surface form annotated when it differs from this entity's canonical label.