What is the Composition API

README.md

What is an API?

An API, or Application Programming Interface, is how a programmer communicates their intent to a system.

Vue and React are systems. They take some data and produce an interstitate representation (a Virtual DOM, but this could change - it's an implementation detail).

When some data changes, the Virtual DOM is updated, and based on the changes, the real DOM is then updated to reflect the changed data.

Options API, Class Components

The underlying ideas in React and Vue have not really changed over the years. The way you interact with the system, though, has.

React previously used "Class Components" or the "Class Component API"

Vue used what we now call the Options API (you provide options in an object format):

export default {
  data() {
    return { foo: 'bar' }
  },
  methods: {
    setFoo () {
      this.foo = 'baz'
    }
  }
}

Composition API

The Options API had some limitations - namely, it was difficult to achieve Type Safety. The Composition API is an alternative API for writing Vue.

You still ues the same underlying reactivity system and Virtual DOM - you just write the code in a different fashion:

<script setup>
  import { ref } from 'vue'
   
  const foo = ref('foo')
  
  function setFoo () {
    foo.value = 'bar'
  }
</script>

Conclusion

The Composition API is an alternative way to create Vue components. You are using the same underlying system, but an alternative Application Programming Interface.