Estas são duas maneiras de escrever componentes Vue. A Options API organiza o código por tipo de opção (data, methods, computed); a Composition API organiza o código por preocupação lógica usando funções como , e .
Estas são duas maneiras de escrever componentes Vue. A Options API organiza o código por tipo de opção (data, methods, computed); a Composition API organiza o código por preocupação lógica usando funções como , e .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Tudo é agrupado em compartimentos fixos (data, methods, computed, lifecycle). Simples e descobrível, mas a lógica de uma única feature fica espalhada por esses compartimentos.
<script setup>
import { ref, computed, onMounted } from "vue";
// all the logic for "counter" lives together
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>
Estado, computed, methods e lifecycle para uma preocupação ficam juntos, e <script setup> torna isso conciso (sem this, sem return).
A Composition API permite que você extraia e reutilize lógica com estado como funções simples (composables):
// useCounter.js — reusable across any component
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
<script setup>
const { count, increment } = useCounter(); // reuse anywhere
</script>
Isso resolve de forma limpa a reutilização de lógica, que era desajeitada na Options API (mixins tinham colisões de nomes e fontes pouco claras).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
A Composition API (com <script setup>) é o padrão recomendado para novos projetos Vue 3, especialmente com TypeScript.
A Composition API é a resposta do Vue 3 para organizar e reutilizar lógica de componentes.
Entender que ela agrupa código por feature (não por tipo de opção) e possibilita composables — versus os compartimentos baseados em opções da Options API — explica o estilo moderno do Vue e por que componentes complexos e codebases com TypeScript a favorecem.
Ambas são totalmente suportadas; você pode até misturá-las.