Options API: data methods computed
Define reactive data, write methods called from the template, and use computed properties for derived values that update automatically.
What Is the Options API?
The Options API organises component logic by option type: data (reactive state), methods (functions), computed (derived state), watch (side effects), lifecycle hooks. Each goes in a named object property.
The data Option
Returns an object of reactive properties. All properties declared in data() are reactive — Vue observes them and re-renders the template when they change.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}All lessons in this course
- Vue SFC: script template style
- Options API: data methods computed
- Directives: v-if v-for v-bind v-on
- Component Props and Emits