Composition API was launched as a plugin a few months back, so there is nothing new there, but in Vue 3 we don’t have to install it like a plugin anymore. Now, it’s built into the package and can be used out of the box without any additional setup.
There are two main advantages to using the Composition API:
- Better organization
- Sharing/reusing the code
Vue 3 will still support Options API, so if you think you don’t need composition API you can always use the traditional methods used in Vue 2.
If you are new to Composition API, here is how we can use it to implement a component:
<template>
<div class="counter">
<p>count: {{ count }}</p>
<p>NewVal (count + 2): {{ countDouble }}</p>
<button @click="inc">Increment</button>
<button @click="dec">Decrement</button>
<p> Message: {{ msg }} </p>
<button @click="changeMessage()">Change Message</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
setup() {
/* ---------------------------------------------------- */
let count = ref(0)
const countDouble = computed(() => count.value * 2)
watch(count, newVal => {
console.log('count changed', newVal)
})
const inc = () => {
count.value += 1
}
const dec = () => {
if (count.value !== 0) {
count.value -= 1
}
}
/* ---------------------------------------------------- */
let msg= ref('some text')
watch(msg, newVal => {
console.log('msg changed', newVal)
})
const changeMessage = () => {
msg.value = "new Message"
}
/* ---------------------------------------------------- */
return {
count,
inc,
dec,
countDouble,
msg,
changeMessage
}
}
}
</script>
And here’s the equivalent code in Options API:
<template>
<div class="counter">
<p>count: {{ count }}</p>
<p>NewVal (count + 2): {{ countDouble }}</p>
<button @click="inc">Increment</button>
<button @click="dec">Decrement</button>
<p> Message: {{ msg }} </p>
<button @click="changeMessage()">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
msg: 'some message'
}
},
computed: {
countDouble() {
return this.count*2
}
},
watch: {
count(newVal) {
console.log('count changed', newVal)
},
msg(newVal) {
console.log('msg changed', newVal)
}
},
methods: {
inc() {
this.count += 1
},
dec() {
if (this.count !== 0) {
this.count -= 1
}
},
changeMessage() {
msg = "new Message"
}
}
}
</script>
We can see that using Composition API allows us better organization by keeping the the code (state, methods, computed properties, watchers etc) of particular features together, which was not possible in Options API.
In the above example, the code for counter and the code for changing a message is clearly separated in Composition API.
As the component grows in size, organizing code becomes an important factor. Any new developer can easily understand the code without spending too much time analyzing all the lines of code.
Before, we could use Mixins to share the code. However, it was hard to keep track of states and methods in different components, and Mixins had the potential to overwrite the existing state or methods in our components if we weren’t careful.
Using the Composition API makes sharing the code much easier. We can factor out the code for a particular feature and use it in multiple places, as shown below:
//message.js
import { ref, watch } from 'vue'
export function message() {
let msg = ref(123)
watch(msg, newVal => {
console.log('msg changed', newVal)
})
const changeMessage = () => {
msg.value = 'new Message'
}
return { msg, changeMessage }
}
Using the shared code in our component
<template>
<div class="counter">
<p>count: {{ count }}</p>
<p>NewVal (count + 2): {{ countDouble }}</p>
<button @click="inc">Increment</button>
<button @click="dec">Decrement</button>
<p>Message: {{ msg }}</p>
<button @click="changeMessage()">change message</button>
</div>
</template>
<script>
import { ref, computed, watch } from 'vue'
import { message } from './common/message'
export default {
setup() {
let count = ref(0)
const countDouble = computed(() => count.value * 2)
watch(count, newVal => {
console.log('count changed', newVal)
})
const inc = () => {
count.value += 1
}
const dec = () => {
if (count.value !== 0) {
count.value -= 1
}
}
let { msg, changeMessage } = message()
return {
count,
msg,
changeMessage,
inc,
dec,
countDouble
}
}
}
</script>
Refer to the official Composition API guide for more details.
