What is composition API?

The Composition API is a new style of writing vuejs components it provides alternatives to the options API, which is the traditional way of writing vue js components.

Using composition API you can write reusable logical function which can be shared between different components.

It allows you to split your code into smaller pieces and can be easily be readable or understandable.

In the Composition API, you define your component's logic in the setup() function, which is called before the component is created.

This function returns an object containing the properties and methods that will be available to the component. 

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

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

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

    return {
      count: state.count,
      increment
    };
  }
};
</script>

The setup() function can use Vue's reactive system to define:

  • reactive data properties,
  • computed properties,
  • and watchers.

It can also define lifecycle hooks, and use other Vue.js features such as directives and plugins. In above example we are using reactive function from composition api. 

const state = reactive({ count: 0 });

Using reactive function we created a state object with object property count with initial value of 0.

Next, we define a function called increment() that simply increments the count property of the state object.

Now, our setup function returns both count and increment function so that our component can use them, 

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

In the template, we display the current value of the count property using mustache syntax ({{ count }}).

We also have a button that calls the increment() method when clicked.

When the increment() method is called, it updates the count property of the state object. Because the state object is reactive, any changes to its properties will trigger a re-render of the component, updating the displayed count value.

How to create reusable function using composition API?

In our example above we can create a new javascript file which encapsulate our logic for counter. Therefore, we can use this new function in different components. 

import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return { count, increment, decrement };
}

You can then use the useCounter function in your components like this: 

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter(10);
    return { count, increment, decrement };
  }
};
</script>

This is just a simple example, but it demonstrates how the Vue Composition API can be used to create reactive data and methods, and return them as a simple object that can be used in the template.

With the Composition API, you can build complex and flexible components that are easier to understand and maintain.

↑