Composition API

A Composition API do Vue.js 3 oferece uma forma mais flexível de organizar código, especialmente para componentes grandes.

Options API (Antigo)

<script>
export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
};
</script>

Composition API (Novo)

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

const count = ref(0);

const increment = () => {
    count.value++;
};
</script>

<template>
    <button @click="increment">Count: {{ count }}</button>
</template>

Composables

// composables/useCounter.js
import { ref } from 'vue';

export function useCounter() {
    const count = ref(0);
    
    const increment = () => count.value++;
    const decrement = () => count.value--;
    const reset = () => count.value = 0;
    
    return { count, increment, decrement, reset };
}