I'm currently exploring the necessity of utilizing the 'new' Vue Composition API.
For instance, take the following component extracted from their basic example:
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from '@vue/composition-api'
export default {
setup () {
const state = reactive({
count: 0,
double: computed(() => state.count * 2),
})
function increment () {
state.count++
}
return {
state,
increment,
}
},
}
</script>
We could alternatively present this in a 'composition style' using vanilla JavaScript and expose it through the data option:
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
export default {
data () {
const state = {
count: 0,
get double () {
return this.count * 2
},
}
function increment () {
state.count++
}
return {
state,
increment,
}
},
}
</script>
Are there notable distinctions between these options? What particular benefits does the Composition API offer?