Vue 3 Composition API

Antes da versão 3 do Vue utilizávamos o que chamamos hoje de Options API, onde a estrutura do script do componente é organizada de forma bem engessada.

Engessada eu digo porque se eu quiser por exemplo criar meus métodos, tem que ser dentro de uma área específica para os métodos, eu não posso criar onde eu quiser.

Para criar as propriedades reativas, tem também a área para criar elas, e trabalhar desse jeito não é tão amigável e organizado como na Composition API.

Dá só uma olhada nessa imagem abaixo, se a imagem estiver pequena ou não der para ver, clique aqui e veja na documentação oficial.

Para esse artigo fazer sentido eu preciso agora mostrar o código de um componente, primeiro usando a Options API e depois a Composition.

Exemplo da Options e Composition API

Com a Options API.

<template>
  <div>
  <!-- Html da aplicação aqui -->
  </div>
</template>

<script>
export default {
    data(){
        return {
            products:[],
            productsSelected:[],
            cart:[]
        };
    },
    async mounted(){
        this.products = await fetch('url/aqui');
    },
    methods:{
        addToCart(product){
            this.cart.push(product);
        },

        removeFromCart(index){
            this.cart.splice(index, 1);   
        },

        removeProduct(index){
            this.product.splice(index, 1);
        }
    },
    computed:{
        totalProductsInCart(){
            return 'Products in cart: '+this.cart.length;
        },
        totalProductsSelected(){
            return 'Products selected: '+this.productsSelected.length;
        }
    }
};
</script>

Agora com a Composition API.

<template>
  <div>
  <!-- Html da aplicação aqui -->
  </div>
</template>

<script setup>
import {computed, reactive} from 'vue';

// cart area
const cart = reactive({data:[]});
function addToCart(product){
    cart['data'].push(product);
}

function removeFromCart(index){
    cart['data'].splice(index, 1);
}

const totalProductsInCart = computed(() => {
    return 'Products in cart: '+cart['data'].length; 
});

// products area
const products = reactive({data:[]});
const productsSelected = reactive({data:[]});
function removeProduct(index){
    products['data'].splice(index, 1);
}

const totalProductsSelected = computed(() => {
    return 'Products selected: '+productsSelected['data'].length;
});
</script>

Explicação do porque usar a Compostion API

Percebeu como eu posso separar na Composition API cada parte da aplicação ?.Tudo relacionado ao carrinho fica em uma parte, e tudo relacionado aos produtos ficam em outra, deixando tudo mais fácil e organizado.

Na Options API, como tudo tem que estar em sua parte designada, eu tenho que colocar todas as funções em uma parte, todas as propriedades reativas em outra..etc..não importa se fazem parte da mesma funcionalidade do sistema ou não.

Por exemplo, se eu quiser trabalhar com carrinho de compras e os produtos do carrinho(como no exemplo dos códigos acima), na Options API eu tenho que ficar restrito a uma área específica para cada parte, assim não tenho como separar nada, tudo relacionado as funções do carrinho e produtos vai em um só lugar, as propriedades reativas do carrinho e produtos também em um só lugar, e assim por diante.

Agora na composition API eu posso separar tudo, tudo envolvido em uma funcionalidade ou parte eu coloco junto, e tudo relacionado a outra parte eu também coloco tudo junto, assim eu deixo tudo mais organizado.

E veja bem, na Options API eu tenho uma parte separada para as propriedades computadas, para os methods, propriedades reativas..etc…na composition API eu importo tudo isso do vue, e assim quando eu preciso de alguma coisa é só importar.

Se eu quiser usar as propriedades computadas, mounted, propriedades reativas ou funções na composition API, eu faço isso abaixo.

<template>
  <h2>About</h2>
</template>

<script setup>
import {computed, onMounted, ref, reative} from 'vue';

function method(){
  // method
}
</script>

Com exceção dos methods(function), eu importei tudo do vue, os methods eu chamo uma função normal, bem mais fácil e organizado né ?

Lembra da imagem que postei um pouco mais para cima ?.Cada cor da imagem é uma funcionalidade ou parte de um site sendo organizado tudo junto(Composition API), ou deixando tudo deparado(Options API).

Espero sinceramente que com esses pequeno artigo eu tenho te ajudado a entender a Composition API.

Você pode gostar dessa aula que gravei para meu canal no youtube.

Se quiser conhecer meu trabalho mais a fundo, visite meu canal no YouTube e veja meus cursos completos clicando nos links abaixo.

🔥Canal no YouTube: Ir para o canal no YouTube
🔥Veja meus cursos disponíveis: Ir para a lista de curs