Vue.js: What is the difference between Options API and Composition API?

Options API — object-based organization by option type. Composition API — function-based organization by logical concern.

Options API:

• Organized by option type (data, methods, computed).
• Easy to understand for beginners.
• Code for one feature scattered across options.
• Less flexible for complex components.

Composition API:

• Organized by logical concern (feature-based).
• More flexible and powerful.
• Better code reuse via composables.
• Improved TypeScript support.

1// Options API
2export default {
3  data() {
4    return { count: 0, name: "" }
5  },
6  computed: {
7    doubled() { return this.count * 2 }
8  },
9  methods: {
10    increment() { this.count++ }
11  }
12}

1// Composition API
2import { ref, computed } from "vue"
3
4export default {
5  setup() {
6    const count = ref(0)
7    const doubled = computed(() => count.value * 2)
8    const increment = () => count.value++
9    return { count, doubled, increment }
10  }
11}

Key differences:

• Options — organized by type, easier to learn.
• Composition — organized by logic, more flexible.
• Composition — better for complex components and reuse.