ეს Vue კომპონენტების დაწერის ორი გზა არის. Options API აორგანიზებს კოდს ვარიანტის ტიპის მიხედვით (data, methods, computed); Composition API აორგანიზებს კოდს ლოგიკური მიზნის მიხედვით ფუნქციების გამოყენებით, როგორიცაა , და .
ეს Vue კომპონენტების დაწერის ორი გზა არის. 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). მარტივი და აღმოჩენადი, მაგრამ ერთი ფუნქციის ლოგიკა ფ散散 მოთავსებულია ამ კატეგორიებში.
<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, methods და lifecycle ერთი მიზნისთვის ერთად არის, და <script setup> ამას ლაკონიკურს ახდის (this არ არის, returnც არ არის).
Composition API საშუალებას გაძლევთ სტატუსიანი ლოგიკა ამოიღოთ და გამოიყენოთ ხელახლა როგორც ჩვეულებრივი ფუნქციები (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 პროექტებისთვის, განსაკუთრებით TypeScript-ით.
Composition API არის Vue 3-ის პასუხი კომპონენტის ლოგიკის ორგანიზაციასა და გამოყენების გასაკეთებლად.
იმის გაწყობა, რომ ის აორგანიზებს კოდს ფუნქციის მიხედვით (არა ვარიანტის ტიპის მიხედვით) და ხელმისაწვდომელია composables — Options API-ის ვარიანტზე დაფუძნებული კატეგორიების წინააღმდეგ — აკეთებს თანამედროვე Vue სტილს და ხსნის, რატომ ნიშნავს რთული კომპონენტები და TypeScript კოდბეისი მას.
ორივე მთლიანად მხარდაჭერილია; თქვენ შეძლოთ მათი აურიეს ნაკრები.