New features in Vue3 — Composition API

The main addition to Vue 3 is the Composition API. Each new thing comes out to solve a problem, and the Composition API gives us a new way to write and organize components. Learn how to use it by refactoring a component using Vue2’s Options API.

What is a Composition API?

• The composite API is a new feature of Vue3 that gives us another way to write components

• Option API-Data (), computed Properties, Methods, Watchers, and Lifecycle hooks are the Option apis that we used to build components in the Vue2 era, But with Vue3 we have a new way of writing and organizing components, this way

Short answer: code sharing. Inside the Setup hook, you can group code by logical concerns and share code with other components.

In the Options API, on the other hand, we have two main ways to share code between components. Mixins and Renderless Components. Thanks to the Composition API, we don’t need Mixins anymore. Mixins make it difficult to determine where certain parts of logic come from in the components that use them. But I think unrendered components are still a valuable tool, even if they can be shared using composable code between components.

What problem does the advent of composite apis solve

• As Vue projects grew in size and complexity, the existing Option apis became overwhelming
• The logic is not really grouped by function, which can make it difficult to read a large and complex component file.
• Sharing repetitive logic (sharing code) between components through the Option API is cumbersome
• The composition time API allows you to encapsulate reused logic as functionality that can be shared between components so that you can use the logic across different components of the entire application.

Short answer: code sharing. Within the setup hooks, we can group our code parts by logical concerns. We can then extract pieces of the reactive logic and share the code with other components.

In the Options API, on the other hand, we have two main ways to share code between components. Mixins and Renderless Components. Thanks to the Composition API, we don’t need Mixins anymore. Mixers make it difficult to determine where certain parts of logic come from in the components that use them. But I think unrendered components are still a valuable tool, even if they can be shared using composable code between components.

Modular API

Responsive data for composite apis

In Vue2 we can define a basic type of data or a composite type of data, such as an object or an array, and then bind the data to the interface. The data defined in the data can be accessed by other properties, computed or methods, and the data is responsive.

data(){
    return{
        title:"machine leanring"
    }
}
Copy the code

The following is the composition API implementation. After a variable is defined by Setup, it is returned as an object property, which can be displayed on the interface via {{title}}

setup(){
  const title = "machine learning"
  return {
  	title
  }
}
Copy the code

<h1 class="title">{{title}}</h1>
Copy the code

Reactive base type data

Defining data this way is not reactive data, but Vue3 provides two ways to define reactive data in Setup: REF and Reactive for primitive and composite data, respectively. Let’s look at the base data type first. The reactive method is ref(base data), such as String, Number, or Boolean

        setup(){
            const title = ref("machine learning")
            return {
                title
            }
        }
Copy the code

Reactive composite type data

Reactive objects can be defined for objects, and then setup returns them as a property of the returned object for invocation.

setup(){
  const title = ref("machine learning");
	let count = ref(0)
  const tut = reactive({
		title:'machine learning',
		lesson:12,
		chapters:[
          {id:0,title:"introducion"},
          {id:2,title:"regression"},
          {id:3,title:"classification"},
				]
      })
		return {
      title,
      count,
      tut
		}
}
Copy the code

Vue2 implements reactive data by providing getters and setters to listen for data through the defineProperty API, but there are some problems with this implementation if there are a large number of attribute values

Code sharing in Vue2

Share code in Mixins mode

The state before Mixins

The following code is probably too familiar, but I won’t explain it too much, respectively, to update the value of the timer by clicking the button and to update the value of the timer by mouse sliding over the title function of the two components.

ClickCounter.vue

<template>
    <div class="container">
        <div class="control">
            <button @click="incrementCount"  class="button" type="text" >click increatment {{count}}</button>
        </div>
    </div>
</template>

<script>

    export default {
        name:"ClickCounter",
        data(){
            return{
                count:0
            }
        },
        methods:{
            incrementCount(){
                this.count += 1;
            }
        }
    }
</script>
Copy the code

HoverCounter.vue

<template>
    <div class="container">
        <h2 @mouseover="incrementCount" class="title">Hoverd {{count}} </h2>
    </div>
</template>

<script>
    export default {
        name:"HoverCounter",
        data(){
            return {
                count:0
            }
        },
        methods:{
            incrementCount(){
                this.count += 1;
            }
        }
    }
</script>

<style scoped>

</style>
Copy the code

methods

methods:{ incrementCount(){ this.count += 1; }}Copy the code

To share the code of the two components through Mixins, first we extract the code of the two components into a counter. Js file, note that this is a JS file

export default{
    data(){
        return{
            count:0}},methods: {incrementCount(){
            this.count += 1; }}}Copy the code

The updated clickCounter. vue and hoverCounter. vue introduce the import CounterMixin from ‘./counter’ and then introduce CounterMixin through the mixins property.

<script>
    import CounterMixin from './counter'
    export default {
        name:"ClickCounter",
        mixins:[CounterMixin],
    }
</script>
Copy the code

Mixins can also define property values with the same name in the object. Defining property values overrides the corresponding property in the mixin.

<script>
    import CounterMixin from './counter'
    export default {
        name:"HoverCounter",
        data(){
            return {
                count:100
            }
        },
        mixins:[CounterMixin]
    }
</script>
Copy the code

Vue3 composite API to achieve code reuse

Start with ClickCounter. Vue and HoverCounter. Vue via the combined API

ClickCounter.vue

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

    export default {
        name:"ClickCounter",
        setup(){
            let count = ref(0);
            function incrementCount(){
                count.value += 1
            }
            return {
                count,
                incrementCount
            }
        }
    }
</script>
Copy the code

This code has been changed through the combinatorial API so that the business logic can be incorporated into a common function,

export default function incrementCount(count){
    const increment = ()=>count.value += 1;
    return {increment}
    
}
Copy the code

It then files it counter. Js into incrementCount.

<script>
    import {ref} from 'vue';
    import incrementCount from './counter.js'
    export default {
        name:"HoverCounter",
        setup(){
            let count = ref(0);
            const {increment} = incrementCount(count)
       
            return {
                count,
                increment
            }
        }
    }
</script>
Copy the code

We learned how to refactor existing Vue code step by step, from Options- to composition-API. Doing so helps move the code into one place, rather than scattering it across components and then grouping it into logical chunks. Finally, you can extract a composite function that contains part of our component and can easily be used again in another component.