Vue Academy · Lekcja

Wzorzec komponentów wyższego rzędu (HOC)

Opakowywanie komponentów za pomocą HOC, przekazywanie props i slotów oraz wybór między HOC a composable.

Wzorzec komponentów wyższego rzędu (HOC) to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 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 komponent wyższego rzędu

Komponent wyższego rzędu (HOC) to funkcja, która przyjmuje komponent i zwraca nowy komponent opakowujący go. Dodaje zachowania przekrojowe, takie jak logowanie, sprawdzanie uprawnień lub ładowanie danych, bez modyfikowania oryginału.

Sygnatura funkcji

Zgodnie z konwencją HOC nazywa się za pomocą prefiksu with. Otrzymuje opakowywany komponent i zwraca jego rozszerzoną wersję.

function withLogging(Wrapped) {
  // return a new component
}

Zwracanie defineComponent

Nowy komponent tworzy się za pomocą defineComponent. Jego funkcja setup renderuje opakowany komponent przez h.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

Przekazywanie atrybutów

Aby wrapper był przezroczysty, należy rozwinąć ctx.attrs na opakowanym komponencie. Spowoduje to przekazanie class, style oraz wszystkich nierozpoznanych propsów.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

Przekazywanie slotów

Należy przekazać obiekt slots wrappera jako argument children, aby opakowany komponent nadal otrzymywał całą zawartość slotów od użytkownika.

return () => h(Wrapped, attrs, slots);

Dodawanie zachowań przekrojowych

Na tym właśnie polega działanie HOC — na wstrzykiwaniu zachowania. W tym przykładzie rejestrowane jest zamontowanie i odmontowanie wokół opakowanego komponentu.

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

Używanie HOC

Dowolny komponent można opakować, a otrzymanego wyniku używać jak zwykłego komponentu w szablonach lub innych funkcjach renderujących.

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

Nazywanie wrappera

Należy ustawić name, aby wrapper był rozpoznawalny w Vue DevTools. Połączenie go z nazwą opakowanego komponentu sprawia, że drzewo pozostaje czytelne.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

Wstrzykiwanie dodatkowych propsów

HOC może dostarczać opakowanemu komponentowi dodatkowe propsy, takie jak pobrany zbiór danych lub flaga funkcji.

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC a composables

Composables współdzielą logikę i często są preferowane w Vue 3. HOC sprawdza się najlepiej, gdy trzeba opakować renderowanie istniejącego komponentu, którego nie można edytować, lub ujednolicić granicę, na przykład obsługę błędów.

Łączenie wielu HOC

Ponieważ każdy HOC zwraca komponent, można je łączyć przez zagnieżdżanie. Należy stosować je od najbardziej wewnętrznego do najbardziej zewnętrznego.

const Enhanced = withLogging(withUser(BaseTable));

Szybki test

Co wrapper HOC musi przekazywać opakowanemu komponentowi, aby pozostać przezroczysty?

Podsumowanie

HOC, taki jak withLogging(Wrapped), zwraca nowy defineComponent, którego setup renderuje opakowany komponent za pomocą h(Wrapped, attrs, slots), dodając zachowania przekrojowe, takie jak logowanie lub wstrzykiwane propsy. Aby zachować przezroczystość, należy przekazywać atrybuty i sloty, a composables wybierać wtedy, gdy potrzebne jest tylko współdzielenie logiki.

Często zadawane pytania

Czy lekcja „Wzorzec komponentów wyższego rzędu (HOC)” jest bezpłatna?

Tak — pełny tekst „Wzorzec komponentów wyższego rzędu (HOC)” 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 „Wzorzec komponentów wyższego rzędu (HOC)”?

Opakowywanie komponentów za pomocą HOC, przekazywanie props i slotów oraz wybór między HOC a composable. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Wzorzec komponentów wyższego rzędu (HOC)”?

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

Dogłębne omówienie funkcji h()
JSX w Vue 3 z Vite
Dynamiczne komponenty z funkcjami render
Wzorzec komponentów wyższego rzędu (HOC)

← Powrót do Vue Academy