Introdução ao Vue 3: Composition API na prática

O que é a Composition API?

A Composition API é uma abordagem moderna do Vue 3 que permite organizar a lógica da sua aplicação de forma mais flexível e reutilizável. Ao contrário da Options API, ela oferece uma estrutura baseada em funções, facilitando a composição de funcionalidades.

Com isso, você pode separar melhor as responsabilidades, evitando componentes gigantes e tornando seu código mais legível e manutenível.

Principais conceitos

Vamos conhecer os principais conceitos da Composition API e entender como eles se encaixam no seu dia a dia de desenvolvimento.

• setup()O setup() é o coração da Composition API. Ele permite declarar as variáveis, funções e reatividades do componente de forma mais organizada. Com <script setup>, tudo que você declara já fica disponível no template.
• ref() e reactive()ref() cria um valor reativo (acessado via .value no script) e reactive() torna um objeto inteiro reativo. Na dúvida, prefira ref(): ele funciona com qualquer tipo de valor.
• computed()Cria valores derivados que são recalculados automaticamente apenas quando suas dependências mudam.
• watch() e watchEffect()Executam efeitos colaterais quando dados reativos mudam, como buscar dados de uma API quando um filtro é alterado.

Na prática: um contador

Veja como fica um componente simples usando <script setup>:

<script setup lang="ts">
import { computed, ref } from "vue";

const count = ref(0);
const double = computed(() => count.value * 2);

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

<template>
  <button @click="increment">
    Cliques: {{ count }} (dobro: {{ double }})
  </button>
</template>

Reaproveitando lógica com composables

Um composable é uma função que encapsula lógica reativa para ser usada em vários componentes. Por convenção, o nome começa com use:

import { onMounted, onUnmounted, ref } from "vue";

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event: MouseEvent) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => window.addEventListener("mousemove", update));
  onUnmounted(() => window.removeEventListener("mousemove", update));

  return { x, y };
}

Conclusão

A Composition API não substitui a Options API, mas oferece uma forma mais poderosa de organizar e reaproveitar código. Comece usando <script setup> em componentes novos e extraia composables quando perceber lógica repetida.