Skip to content

Instantly share code, notes, and snippets.

@lmiller1990
Created December 20, 2022 01:01
Show Gist options
  • Save lmiller1990/e95d823db353f16fed794076ba6216a2 to your computer and use it in GitHub Desktop.
Save lmiller1990/e95d823db353f16fed794076ba6216a2 to your computer and use it in GitHub Desktop.
What is the Composition API

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment