0Pricing
Vue Academy · Lekcja

Co wyróżnia dobry composable

Konwencja nazewnicza (useName), enkapsulacja stanu reaktywnego, zwracanie refów zamiast surowych wartości.

Co wyróżnia dobry composable to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Czym jest composable

Composable to funkcja wykorzystująca Composition API Vue do hermetyzowania i ponownego wykorzystywania logiki zarządzającej stanem. Jest odpowiedzią Vue 3 na mixiny — rozwiązaniem bardziej przejrzystym, jawnym i przyjaznym dla systemu typów.

Konwencja prefiksu use

Zgodnie z konwencją composable nazywa się z prefiksem use: useCounter, useFetch, useMouse. Od razu sygnalizuje to, że funkcja zawiera logikę reaktywną.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Zwracanie refów zamiast surowych wartości

Należy zwracać refy (lub stan reaktywny), aby odbiorcy zachowali reaktywność po destrukturyzacji. Zwrócenie count.value przekazałoby migawkę, która nigdy się nie aktualizuje.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Bezpieczna destrukturyzacja

Ponieważ zwracane są refy, odbiorca może swobodnie przeprowadzić destrukturyzację bez utraty reaktywności. Każdy ref zachowuje własne połączenie reaktywne.

const { count } = useCounter();
// count stays reactive after destructuring

Jedna odpowiedzialność

Dobry composable robi jedną rzecz. useFetch pobiera dane, a useLocalStorage je utrwala. Małe, wyspecjalizowane composable można łatwo łączyć w większe funkcje.

Łączenie composable

Composable mogą wywoływać inne composable, tworząc warstwową logikę. Na przykład useUserProfile może wewnętrznie korzystać z useFetch.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Sprzątanie efektów ubocznych

Jeśli composable dodaje nasłuchiwanie zdarzeń, timery lub subskrypcje, musi je usuwać w onUnmounted, aby zapobiec wyciekom pamięci.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Przyjmowanie argumentów reaktywnych

Composable mogą przyjmować refy lub gettery jako dane wejściowe i reagować na nie za pomocą watch lub watchEffect, dzięki czemu są elastyczne.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Unikanie konfliktów nazw

Gdy composable zwraca wiele wartości, należy nadawać im jasne nazwy. Jeśli dwa composable zwracają data, należy zmienić nazwę podczas destrukturyzacji, aby uniknąć konfliktów.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Zgodność z idiomami frameworka

Composable należy wywoływać synchronicznie na najwyższym poziomie setup (lub innego composable), a nie wewnątrz instrukcji warunkowych ani asynchronicznych wywołań zwrotnych, aby haki cyklu życia rejestrowały się poprawnie.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Dokumentacja i kształt zwracanej wartości

Należy zwracać przewidywalny obiekt, aby odbiorcy wiedzieli, co otrzymują. Spójny kształt (stan oraz metody) ułatwia naukę i korzystanie z composable.

return { count, increment, decrement, reset };

Szybkie sprawdzenie

Dlaczego composable powinien zwracać refy zamiast surowych wartości?

Podsumowanie

Poznał Pan/Pani cechy dobrego composable: prefiks use, zwracanie refów umożliwiające bezpieczną destrukturyzację, jedną odpowiedzialność, sprzątanie efektów ubocznych w onUnmounted oraz unikanie konfliktów nazw w zwracanym obiekcie.

Często zadawane pytania

Czy lekcja „Co wyróżnia dobry composable” jest bezpłatna?

Tak — pełny tekst „Co wyróżnia dobry composable” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Co wyróżnia dobry composable”?

Konwencja nazewnicza (useName), enkapsulacja stanu reaktywnego, zwracanie refów zamiast surowych wartości. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Co wyróżnia dobry composable”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Co wyróżnia dobry composable
  2. useCounter: prosty composable
  3. useFetch: composable do danych asynchronicznych
  4. VueUse: biblioteka composable
← Powrót do Vue Academy