რა არის კომპოზაბლები და როგორ წერთ ერთს?

Question

Accepted Answer

**კომპოზაბლი** არის გამოსაყენებელი ფუნქცია, რომელიც ჩასახებული აქვს **სტეითფული ლოგიკა** Composition API-ის გამოყენებით. ფარდობითობის მიხედვით ის ეწოდება `useXxx` და ბრუნდება რეაქტიული სტეიტი პლიუს ფუნქციები — რაც საშუალებას გაძლევთ ლოგიკა გაზიაროთ კომპონენტებს შორის სახლის მცენარეებისა და გამეორების გარეშე. ## კომპოზაბლის წერა ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## ნებისმიერ კომპონენტში გამოყენება ```vue ``` ყოველი კომპონენტი, რომელიც გამოიძახებს `useCounter()`-ს, თავის **საკუთარი აბსოლუტური** `count`-ს მიიღებს — კომპოზაბლები ყოველი ზარის შემთხვევაში신 სტეიტს ქმნის, განსხვავებით გაზიარებული მოდულის დონის ცვლადისაგან. ## რეალური მაგალითი: useFetch lifecycle-თან ```js import { ref, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0), y = ref(0); const update = (e) => { x.value = e.pageX; y.value = e.pageY; }; window.addEventListener("mousemove", update); // set up onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup! return { x, y }; } ``` კომპოზაბლებმა შეუძლია გამოიყენონ lifecycle hooks, watchers და სხვა კომპოზაბლები — და პირველ რიგში, ისინი **გასუფთავების საკუთარი ლოგიკა გასახელებენ** (`onUnmounted`), ამიტომ მომხმარებელი არ უნდა გახსოვდეს ეს. ## კომპოზაბლები vs mixins (ძველი გზა) ```text Mixins (Vue 2): merged into the component — unclear where properties came from, naming collisions between mixins, implicit dependencies Composables: explicit imports + return values — clear sources, no collisions, can be composed, fully typed in TypeScript ``` ## რატომ აქვს მნიშვნელობა კომპოზაბლები არის *იდიომატური* გზა სტეითფული ლოგიკის ამოღებისა და ხელახლა გამოყენებისთვის Vue 3-ში — მონაცემების ამოღება, ფორმის დამუშავება, მაუსის/ჯამის ტრეკინგი, დებოუნსინგი და ა.შ. ისინი პრობლემას ასაფასებენ ლოგიკის გამოსაყენებელ კაბინეტად სუფთა გზით (ცხადი, კოლიზიის გარეშე, კომპოზაბელი, TypeScript-მეგობრული) სად Vue 2-ის mixins ვერ შეძლო. ისინი მთავარი მიზეზია, რატომ მიდიან გუნდები Composition API-ზე: გაზიარებული ლოგიკა ხდება მარტივი, ტესტირებული ფუნქცია რამდენი განაპირობებული ან დუპლიცირებული კოდის ნაცვლად.