Composition API Intro

Composition API Intro: Organizing Vue 3 Logic by Feature

The Composition API is a set of Vue 3 functions that lets you write component logic using imports like ref, computed, and onMounted. Instead of splitting one feature across data, methods, and mounted options, you keep related code grouped together.

As components grow beyond a hundred lines, feature grouping makes reading and refactoring much easier. You can also extract any logical feature straight into a reusable composable function without mixin collisions.

flowchart TD
    subgraph Options["Options API (Split by Option)"]
        D["data()"]
        M["methods"]
        C["computed"]
    end
    subgraph Composition["Composition API (Grouped by Feature)"]
        F1["Search Feature (ref, computed, watch)"]
        F2["Auth Feature (ref, function, onMounted)"]
    end

Why Choose Composition API and <script setup>

• Feature Cohesion: Keep state, helpers, and lifecycle hooks for one feature side by side.
• Clean Logic Reuse: Share reactive logic across components through plain functions instead of mixins.
• Better TypeScript Support: Plain variables and function parameters give editors accurate type inference without this.
• Smaller Production Bundles: Unused Composition API imports tree-shake out during Vite builds.

Practical SFC Composition API Example

In <script setup>, every top-level import, ref, and function is exposed directly to <template>.

<script setup>
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log('Composition API counter mounted');
});
</script>

<template>
  <div class="comp-api-demo">
    <h3>Composition API Counter</h3>
    <p>Count: {{ count }} | Double: {{ doubleCount }}</p>
    <button @click="increment">Add One</button>
  </div>
</template>

Common Mistakes

• Mixing setup() Return Objects with <script setup>: When using <script setup>, you do not write an explicit export default { setup() { return { ... } } } wrapper. Top-level bindings work automatically.
• Assuming Composition API Replaces Templates: Composition API only replaces the script organization style. You still write standard Vue <template> and <style scoped> blocks.
• Registering Lifecycle Hooks After await: Always call onMounted() or watch() synchronously before any await statement inside <script setup>.

Frequently Asked Questions

Is the Options API deprecated in Vue 3?

No, the Options API remains supported in Vue 3. However, <script setup> with the Composition API is the recommended default for new applications and large projects.

Can I convert one component at a time from Options API?

Yes. Both styles work side by side in the same Vue 3 project, so you can write new components in <script setup> without rewriting older files immediately.

Why does ref need .value in JavaScript?

Primitives like numbers and strings pass by value in JavaScript. Wrapping them in { value: 0 } lets Vue track reads and mutations reliably inside <script setup>.