Acestea sunt două moduri de a scrie componente Vue. Options API organizează codul după tipul de opțiune (data, methods, computed); Composition API organizează codul după preocuparea logică folosind funcții ca , și .
Acestea sunt două moduri de a scrie componente Vue. Options API organizează codul după tipul de opțiune (data, methods, computed); Composition API organizează codul după preocuparea logică folosind funcții ca , și .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Totul este grupat în compartimente fixe (data, methods, computed, lifecycle). Simplu și ușor de descoperit, dar logica unei singure funcționalități se împrăștie pe acele compartimente.
<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>
Starea, computed, methods și lifecycle pentru o preocupare stau împreună, iar <script setup> o face concisă (fără this, fără return).
Composition API vă permite să extrageți și refolosiți logica stateful ca funcții simple (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>
Aceasta rezolvă curat reutilizarea logicii, care era stânjenitoare în Options API (mixins aveau coliziuni de nume și surse neclare).
Options API → simpler mental model, fine for small components, familiar to beginners
Composition API → better for large components, TypeScript, and reusing logic (composables)
Composition API (cu <script setup>) este recomandată implicit pentru proiectele noi Vue 3, în special cu TypeScript.
Composition API este răspunsul Vue 3 la organizarea și reutilizarea logicii componentelor.
Înțelegerea că grupează codul după funcționalitate (nu după tipul de opțiune) și permite composables — versus compartimentele bazate pe opțiuni ale Options API — explică stilul modern Vue și de ce componentele complexe și bazele de cod TypeScript o preferă.
Ambele sunt pe deplin acceptate; puteți chiar și să le amestecați.