Introduction to Composition API

[mostakimvip06]

The latest version, marked with the number 3, introduces many improvements and changes compared to the previous version, including the entire framework has been rewritten using Typescript , which allows for much easier use in projects, and another major change is the introduction of the Composition API , which is the topic of this post.

Why Composition API?
Composition API aims to increase code/component reusability and code readability, because practically all the code is in one place by replacing various options ( data , methods etc.) of the component with the setup () method . Reusability is ensured by the ability to extract logic from a component and inject it into any component where we want to use it, these are the so-called composition functions .

Below is a small comparison.

Vue 3 - Code - Composition APIVue 3 - Code - Composition API
As we can see in the examples, Composition API allows us to include all the logic in one place. To create reactive variables with primitive data types we need to use ref function to wrap the value and as we can see in doIt function , we have access by referring to the value parameter of the variable. All hooks are now called inside the setup method and the setup method itself replaces the hook created , beforeCreate .

Another important difference from the Options API is the lack of access to `this` in the setup method. So how do we access the props object containing the data bound to the component?

The setup method takes two parameters: props and context . All the bound properties are accessible via the props object. It is important that we cannot destructure the props argument, because then we will lose reactivity. Instead, we need to use the toRefs function , which allows us to unpack the properties without losing reactivity.

Vue 3 - Code - Composition API
We can normally destructure the context argument and extract objects/functions from it: attrs , slots , emit and expose . The setup method returns all variables and functions that we want to use in the template.

Composition Function
To extract logic from components we use composition functions . They allow us to extract reactive state and functionality outside of the component and use them anywhere in the application. Because they have their own state independent egypt telemarketing data of the components they are used in, they can replace Vuex to some extent . They are equivalent to mixins used in Options API. By using Composition API, web design in Wrocław becomes more flexible and components more reusable.

In components we destructurize the object returned by the functions and extract the data and functions that interest us. Thanks to destructurization we avoid conflicts in the names of the properties that we retrieve. We can create the returned properties as read-only and thus prevent their mutation by directly changing their value. Then we can implement the same principle of operation as in the case of mutations in Vuex .

Typically, each destructured property has its local state within the component, but there is nothing stopping you from defining it with a global state that will be shared by the components that use it. An example would be a list of people retrieved from the API, whose state should be shared by all the components.

Vue 3 - Code - Composition API
In the example below we extract the method that returns persons. Then we pass the list returned by the getPersons function as a parameter to the reactive function , which creates a reactive copy of the list. The copy is deep , i.e. we also create copies of all nested reference data types.

Vue 3 - Code - Composition API
Below is an example of a function that returns the global state of the persons object , so it will be shared by all components. Additionally, it returns the getPersons function , which returns a read-only copy of persons and is not reactive, but there is nothing stopping you from providing the copy it returns as an argument to the reactive function in the component and you will get a reactive local copy. The getPerson function allows you to pull an object from the list by index and returns its properties, which are reactive (as after using ref ). Their change in the component will be global for the object in the list. The addPerson function , in turn, allows you to mutate the list by adding another element.

Vue 3 - Code - Composition API
Example of use in a component.

Vue 3 - Code - Composition API
And the console.log result.

Vue 3 - console.log - Composition API
As you can see, changing the destructured property of the first object in the list has a global effect on the list, as well as adding another object to the list.

Summary
Above I have presented minimal examples of working with the Composition API in Vue 3. In my opinion, this is a great improvement over the Options API, allowing for increased code reusability. What I have presented in this post is just the tip of the iceberg, and Vue 3 offers many more useful changes over its predecessor, which I will try to present in future posts.