Vue components can be authored in two different API styles: Options API and Composition API. The Composition API is a new way of organizing and building Vue components, but it doesn't replace the traditional Options API. Each approach has its strengths and weaknesses, and developers need to decide which one to use based on their needs.

The Composition API can make code more readable and maintainable by allowing developers to extract logic from components and define it in a declarative way. This can be particularly helpful in large applications where many components need to share the same functionality.

However, the Options API is familiar to many developers and is still a valid way of building Vue components. It has been around for a long time and is widely used in the Vue ecosystem.

#Options API: With Options API, we define a component's logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which point to the component instance:

// Vue Option API
<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

#Composition API: With Composition API, we define a component's logic using imported API functions. In SFCs, Composition API is typically used with <script setup>. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables/functions declared in <script setup\> are directly usable in the template.

Here is the same component, with the exact same template, but using Composition API and <script setup> instead:

// Vue Composition API
<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

In conclusion, The Composition API is a valuable addition to Vue 3, offering improved code organization, performance, and logic reuse across multiple components. It is not a replacement for the Options API but a powerful tool that is worth considering for Vue developers. The choice between the Composition API and the Options API (or both) will depend on individual needs and preferences. Nevertheless, the Composition API is a feature worth exploring 🙂.