🤔 O que é a Composition API?

A Composition API é uma forma moderna de escrever componentes no Vue 3. Ela oferece mais flexibilidade, organização e reutilização do que a abordagem tradicional, chamada de Options API.

A ideia principal é agrupar a lógica reativa por função, não por tipo de opção (data, methods, computed...).

🔄 Comparação: Options API vs Composition API

🧱 Options API (forma antiga) 

export default {
  data() {
    return {
      contador: 0
    }
  },
  methods: {
    incrementar() {
      this.contador++
    }
  }
}

🧩 Composition API (forma nova) 

import { ref } from 'vue'

export default {
  setup() {
    const contador = ref(0)
    const incrementar = () => contador.value++

    return {
      contador,
      incrementar
    }
  }
}

🎯 Por que usar a Composition API?

Vantagem Descrição
🧠 Lógica mais agrupada Funções e reatividade ficam juntas, facilitando a leitura e manutenção
🔁 Reutilização facilitada É possível criar composables (funções reutilizáveis) com facilidade
🧰 Maior controle do componente Você tem mais controle sobre reatividade, ciclo de vida e estado
📦 Pronto para apps modernos Ideal para grandes projetos, Vue + TypeScript, Nuxt, etc

📦 Quando usar Composition API?

  • Projetos novos que usam Vue 3
  • Aplicações grandes, onde a lógica de cada componente é complexa
  • Quando você quer escrever código mais reutilizável
  • Se estiver usando Nuxt 3 (ele já incentiva Composition API por padrão)

❗ E quando não usar?

  • Projetos pequenos e simples podem se beneficiar da simplicidade da Options API
  • Se sua equipe inteira já domina bem a Options API, talvez a migração não seja prioridade

✅ Conclusão

A Composition API é uma evolução natural do Vue. Com ela, você ganha:

  • Melhor organização da lógica
  • Maior reutilização de código
  • Mais controle sobre o comportamento reativo