Composition API

This is one of the most anticipated features of Vue 3. The composition API is a new way of creating Vue components, with an optimized way of writing code, and providing full TypeScript type checking support in your component. This method organizes the code in a simpler and more efficient way.

In this new way of declaring a Vue component, you just have a setup property that will be executed and will return everything your component needs in order to be executed, like this example:

<template>
  <p @click="increaseCounter">{{ state.count }}</p>
</template>
<script>
import { reactive, ref } from 'vue';

export default {
  setup(){
    const state = reactive({
      count: ref(0)
    });

    const increaseCounter = () => {
      state.count += 1;
    }

    return { state, increaseCounter }
  }
}
</script>

You will import the reactivity API from the Vue core to enable it in the object type data property, in this case, state. The ref...