LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2615 min read

Options API vs Composition API

See the Options API in full, and learn to translate between it and the Composition API you've been learning.

The Options API in Full

The Options API organizes a component as a plain JavaScript object with named option blocks — data, computed, methods, watch, and lifecycle hooks named directly (mounted, unmounted) instead of prefixed with on.

<script>
export default {
  data() {
    return { count: 0 };
  },
  computed: {
    doubled() {
      return this.count * 2;
    },
  },
  watch: {
    count(newValue) {
      console.log('count changed to', newValue);
    },
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  mounted() {
    console.log('Component mounted');
  },
};
</script>


<template>
  <button @click="increment">{{ count }} (doubled: {{ doubled }})</button>
</template>

Side-by-Side Translation

Options APIComposition API Equivalent
data() { return { count: 0 } }const count = ref(0)
computed: { doubled() {...} }const doubled = computed(() => ...)
methods: { increment() {...} }function increment() {...}
watch: { count(v) {...} }watch(count, (v) => {...})
mounted() {...}onMounted(() => {...})
this.countcount.value

Why Some Teams Still Prefer the Options API

  • A fixed structure (data, methods, computed) can be easier to navigate for newcomers to a codebase.
  • No this-vs-.value distinction to learn — this.count works the same way throughout.
  • Extensive existing Vue 2 codebases already use it, and rewriting isn't always worth the cost.
Vue Officially Recommends Composition API for New Projects

The Options API is fully supported and not deprecated, but Vue's own documentation and this course both point new projects toward the Composition API, especially as a project grows in size or uses TypeScript.

FAQs

Yes, Vue supports this for migration purposes, but it's best avoided in new code — pick one style per component for clarity.

Yes — the underlying concepts (reactive state, computed values, watchers, lifecycle) are identical; only the syntax for expressing them differs.

Summary

The Options API and Composition API express the exact same underlying concepts with different syntax — this course uses the Composition API throughout, but you can now read either style confidently. Next, you'll go deeper into working directly with the DOM using template refs.

Next Lesson →

Template Refs