Описание тега vue-composition-api
Набор аддитивных API-интерфейсов на основе функций для VueJS, которые позволяют гибко комбинировать логику компонентов.
API, предлагаемые в этом API, предоставляют пользователям большую гибкость при организации кода компонентов. Вместо того, чтобы постоянно упорядочивать код по параметрам, код теперь можно организовать как функции, каждая из которых имеет дело с определенной функцией. API-интерфейсы также упрощают извлечение и повторное использование логики между компонентами или даже внешними компонентами.
Базовый пример
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>