Vue Academy · Lekcja

Dlaczego Composition API?

Ograniczenia Options API, problem ponownego używania logiki, zalety Composition API.

Dlaczego Composition API? 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.

Dwa sposoby pisania w Vue

Vue 3 oferuje dwa style tworzenia logiki komponentów: Options API i Composition API. Oba prowadzą do tego samego rezultatu, ale organizują kod w zupełnie inny sposób.

Zrozumienie różnic pomaga wybrać właściwe narzędzie i swobodnie czytać istniejące bazy kodu.

Jak Options API organizuje kod

Options API dzieli komponent na ustalone sekcje: data, computed, methods, watch oraz hooki cyklu życia. Każdy element danej funkcjonalności znajduje się w innej sekcji.

W przypadku jednej niewielkiej funkcjonalności może być konieczne przejście do czterech różnych bloków pliku.

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

Problem: rozproszenie powiązanej logiki

Gdy komponent się rozrasta, logika jednego obszaru odpowiedzialności (na przykład pola wyszukiwania) zostaje rozproszona między data, methods, computed i watch. Aby prześledzić jedną funkcjonalność, trzeba ciągle przewijać plik w górę i w dół.

Nazywa się to problemem fragmentacji.

Composition API: grupowanie według funkcjonalności

Composition API pozwala umieścić cały kod jednego logicznego obszaru odpowiedzialności w jednym miejscu. Stan reaktywny, wartości pochodne oraz funkcje, które je zmieniają, znajdują się obok siebie.

Czytając kod od góry do dołu, można zobaczyć całą funkcjonalność w jednym miejscu.

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

Obok siebie

Warto zauważyć, że drugi przykład umieszcza count, jego pochodną doubled oraz increment razem. W Options API te same trzy elementy znajdowały się w trzech oddzielnych sekcjach.

Options API: organizacja według typu opcji
Composition API: organizacja według logicznego obszaru odpowiedzialności

Ponowne użycie logiki: mixiny (stary sposób)

Przed pojawieniem się Composition API głównym narzędziem ponownego użycia logiki były mixiny. Mixin scala swoje opcje z komponentem.

Mixiny mają jednak poważne wady: konflikty nazw, niejasne źródła właściwości oraz niejawne zależności między mixinami.

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

Ponowne użycie logiki: composables (nowy sposób)

Composable to po prostu funkcja, która korzysta z API reaktywności i zwraca stan reaktywny. Wywołuje się ją jak dowolną funkcję, więc źródło każdej wartości jest jawne.

Bez magicznego scalania i ukrytych konfliktów nazw.

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

Używanie composable

Importowanie i wywoływanie composable jasno pokazuje, że count i increment pochodzą z useCounter. Podczas destrukturyzacji można nawet zmienić ich nazwy, aby uniknąć konfliktów.

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

Dlaczego composables są lepsze od mixinów

Jawne źródła — każda wartość pochodzi z widocznego wywołania funkcji.
Brak konfliktów nazw — można swobodnie destrukturyzować elementy i zmieniać ich nazwy.
Kompozycyjność — jeden composable może wywoływać inny.
Przyjazne TypeScriptowi — TypeScript automatycznie wywnioskuje typy zwracanych wartości.

Lepsza obsługa TypeScriptu i narzędzi

Ponieważ Composition API jest zbudowane ze zwykłych funkcji i zmiennych, TypeScript może wywnioskować typy bez specjalnych narzędzi. Nie ma tu obiektu this z ręcznie definiowanym typem, który trzeba utrzymywać, a edytory oferują dokładne uzupełnianie kodu.

Kiedy używać którego rozwiązania

Composition API sprawdza się szczególnie dobrze w średnich i dużych komponentach oraz w przypadku logiki, którą chcesz ponownie wykorzystywać. Options API nadal jest w pełni poprawne i może być czytelne w małych komponentach.

Nowy kod Vue 3 zazwyczaj preferuje Composition API, zwłaszcza z użyciem <script setup>, które wkrótce poznasz.

Szybki test

Sprawdź, czego dowiedziałeś się o powodach powstania Composition API.

Podsumowanie

W tej lekcji dowiedziałeś się, że:

Options API organizuje kod według typu opcji, przez co funkcjonalność zostaje rozproszona między sekcjami.
Composition API grupuje kod według logicznego obszaru odpowiedzialności.
Mixiny umożliwiają ponowne użycie logiki, ale powodują konflikty nazw i ukrywają źródła właściwości.
Composables to zwykłe funkcje zwracające stan reaktywny — jawne, wolne od konfliktów i kompozycyjne.

Często zadawane pytania

Czy lekcja „Dlaczego Composition API?” jest bezpłatna?

Tak — pełny tekst „Dlaczego Composition API?” 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 „Dlaczego Composition API?”?

Ograniczenia Options API, problem ponownego używania logiki, zalety Composition API. Ć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 „Dlaczego Composition API?”?

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

Dlaczego Composition API?
Funkcja setup() i zmienne reaktywne
ref a reactive: kiedy używać każdego z nich
Computed i watch w Composition API

← Powrót do Vue Academy