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 codeThe 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 codeReactive 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 codeReactive 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 codeVue2 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 file name | instructions | |
|---|---|---|
| ClickCounter.vue | Update the timer value by clicking the button | |
| HoverCounter.vue | Update the value of the timer by mouse-gliding over the title | |
| counter.js | Data and update data methods are shared from clickCounter. vue and hoverCounter. vue |
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 codeHoverCounter.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 codemethods
methods:{ incrementCount(){ this.count += 1; }}Copy the codeTo 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 codeThe 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 codeMixins 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 codeVue3 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 codeThis 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 codeIt 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 codeWe 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.