Estas son dos formas de escribir componentes Vue. La Options API organiza el código por tipo de opción (data, methods, computed); la Composition API organiza el código por preocupación lógica usando funciones como , y .
Estas son dos formas de escribir componentes Vue. La Options API organiza el código por tipo de opción (data, methods, computed); la Composition API organiza el código por preocupación lógica usando funciones como , y .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Todo se agrupa en cubetas fijas (data, methods, computed, lifecycle). Es simple y fácil de descubrir, pero la lógica de una única característica se dispersa en esas cubetas.
<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>
El estado, computed, métodos y lifecycle para una única preocupación están juntos, y <script setup> lo hace conciso (sin this, sin return).
La Composition API te permite extraer y reutilizar lógica con estado como funciones 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>
Esto resuelve limpiamente la reutilización de lógica, que era incómoda en la Options API (los mixins tenían colisiones de nombres y fuentes poco claras).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
La Composition API (con <script setup>) es el estándar recomendado para nuevos proyectos de Vue 3, especialmente con TypeScript.
La Composition API es la respuesta de Vue 3 para organizar y reutilizar la lógica de componentes.
Entender que agrupa el código por característica (no por tipo de opción) y habilita composables —versus las cubetas basadas en opciones de la Options API— explica el estilo Vue moderno y por qué los componentes complejos y las bases de código con TypeScript lo favorecen.
Ambas son completamente soportadas; incluso puedes mezclarlas.