Options API vs Composition API in Vue.js

Options API vs Composition API in Vue.js

🧩 1. What Are They?

Vue offers two ways to write components:

API StyleIntroduced InDescription
Options APIVue 2Organize code by options (data, methods, computed, etc.)
Composition APIVue 3Organize code by logic using functions inside a setup() block

Both can coexist in the same app — they just use different syntax and patterns.

⚙️ 2. Options API Example

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Options API!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted!')
  }
}
</script>

🧠 Key Idea:

You use options like:

  • data() for reactive state
  • methods for functions
  • computed for derived values
  • mounted(), updated() for lifecycle hooks

Everything is attached to this.

⚡ 3. Composition API Example

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

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

const message = ref('Hello from Composition API!')
const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('Component mounted!')
})
</script>

🧠 Key Idea:

You use functions instead of object options:

  • ref() and reactive() for state
  • regular JS functions for logic
  • onMounted() etc. for lifecycle hooks
  • No this — everything is scoped variables inside <script setup>

🔍 4. Main Differences

FeatureOptions APIComposition API
SyntaxObject-based (data, methods)Function-based (setup(), ref, computed)
Logic OrganizationGrouped by option typeGrouped by feature / logic
ReusabilityMixins or extendsComposables (functions that return reactive data)
Learning CurveEasier for beginnersMore flexible, but more abstract
PerformanceSimilarSimilar (Composition slightly more tree-shakable)
Used inVue 2 & 3Vue 3+ (recommended for new projects)

🧰 5. When to Use Which?

SituationRecommendation
Small or beginner project✅ Options API — simpler to read
Large, scalable app✅ Composition API — easier to organize complex logic
Writing reusable logic (hooks/composables)🧩 Composition API
Upgrading Vue 2 project🕐 Stick with Options API or mix both gradually

🧠 6. Example Comparison

Imagine you have a component that:

  • Tracks mouse position
  • Fetches user data

In Options API, you’d mix everything inside one large component under different sections.

In Composition API, you can move logic into reusable composable functions like useMouse() or useUser():

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = e => { x.value = e.pageX; y.value = e.pageY }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

Then in your component:

<script setup>
import { useMouse } from './useMouse'
const { x, y } = useMouse()
</script>

✅ Summary

AspectOptions APIComposition API
Organizes code byComponent sectionsFeature logic
Uses this✅ Yes❌ No
ReusabilityMixinsComposables
Vue Version2 & 33+
Recommended for new apps⚠️ Optional✅ Yes

Leave a Reply