What is the difference between the Options API and the Composition API in Vue?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Recognize the Options API shape

   A component is defined as an object with data, methods, computed and watch options, each grouping code by its kind.

2. Step 2

   Understand the fragmentation problem

   As features grow, one concern spreads across several options, forcing you to scroll between them to follow the logic.

3. Step 3

   Move logic into setup()

   The Composition API exposes state and behavior from a setup() function using ref, reactive, computed and lifecycle hooks.

4. Step 4

   Group by feature

   Keep all state, computed values and functions for a single concern together instead of scattering them by option type.

5. Step 5

   Extract composables

   Lift a self-contained block of logic into a useXxx() function so multiple components can reuse it.

Code Example

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    double() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
  count.value++
}

Follow-up Questions

• What is a composable and how does it differ from a mixin?
• How does <script setup> relate to the Composition API?
• Can you use the Options API and Composition API in the same project?
• Why does the Composition API improve TypeScript support?
• When would you still prefer the Options API?