Αυτοί είναι δύο τρόποι για να γράψετε Vue components. Το Options API οργανώνει τον κώδικα κατά τύπο επιλογής (data, methods, computed). το Composition API οργανώνει τον κώδικα κατά λογική ανησυχία χρησιμοποιώντας συναρτήσεις όπως , , και .
Αυτοί είναι δύο τρόποι για να γράψετε Vue components. Το Options API οργανώνει τον κώδικα κατά τύπο επιλογής (data, methods, computed). το Composition API οργανώνει τον κώδικα κατά λογική ανησυχία χρησιμοποιώντας συναρτήσεις όπως , , και .
refcomputedsetup<script>
export default {
data() { return { count: 0 }; },
computed: { double() { return this.count * 2; } },
methods: { increment() { this.count++; } },
mounted() { console.log("mounted"); },
};
</script>
Όλα είναι ομαδοποιημένα σε σταθερούς κάδους (data, methods, computed, lifecycle). Απλό και ανακαλύψιμο, αλλά η λογική ενός μεμονωμένου feature διασκορπίζεται σε αυτούς τους κάδους.
<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>
Η κατάσταση, το computed, οι μέθοδοι και το lifecycle για μια ανησυχία βρίσκονται μαζί, και το <script setup> το κάνει συνοπτικό (χωρίς this, χωρίς return).
Το Composition API σας επιτρέπει να εξαγάγετε και να επαναχρησιμοποιήσετε stateful logic ως απλές συναρτήσεις (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>
Αυτό λύνει καθαρά το πρόβλημα της επαναχρησιμοποίησης λογικής, το οποίο ήταν ενοχλητικό στο Options API (τα mixins είχαν συγκρούσεις ονοματοδοσίας και ασαφείς πηγές).
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 (με <script setup>) είναι η προτεινόμενη προεπιλογή για νέα Vue 3 projects, ειδικά με TypeScript.
Το Composition API είναι η απάντηση του Vue 3 στην οργάνωση και επαναχρησιμοποίηση της λογικής του component.
Η κατανόηση ότι ομαδοποιεί τον κώδικα κατά feature (όχι κατά τύπο επιλογής) και ενεργοποιεί composables — σε σχέση με τους option-based κάδους του Options API — εξηγεί το σύγχρονο στυλ Vue και γιατί τα σύνθετα components και τα TypeScript codebases το προτιμούν.
Και οι δύο υποστηρίζονται πλήρως. μπορείτε ακόμη και να τα ανακατέψετε.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά