What is the difference between the Options API and the Composition API in Vue?
Quick Answer
The Options API organises a component by option type — data, methods, computed, watch. The Composition API (Vue 3) organises by feature inside a setup() / <script setup> block, and lets you extract reusable logic into composables (functions returning reactive state). Better for large components and code reuse.
The Options API groups a component's code by what kind of thing it is — all your data in one object, all your methods in another, computed properties in another. The Composition API groups code by feature: in setup, the ref, the function that changes it, and the watcher for it all sit together. The big win is reuse — you pull that feature's code into a composable function like useCounter and call it from any component, which is what mixins tried to do but did badly. Both work in Vue 3, and <script setup> is the tidy syntax for the Composition API.
- Options API: easier for beginners, clear structure, but a feature's logic is scattered across
data/methods/watch. - Composition API:
const count = ref(0); function inc() { count.value++ }— all one feature's code together; extract touseCounter()and reuse. - Replaces mixins (which had name-collision and unclear-source problems).
- Both are supported in Vue 3;
<script setup>is the concise Composition syntax.