0Pricing
Vue Academy · Lekcja

Dogłębne omówienie funkcji h()

Sygnatura h(type, props, children), struktura VNode oraz renderowanie dynamicznych typów komponentów.

Dogłębne omówienie funkcji h() 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 funkcja h

Funkcja h (skrót od hyperscript) tworzy bezpośrednio w JavaScript węzły wirtualnego DOM (VNodes). Stanowi podstawę, do której kompilowane są szablony. Funkcja renderująca zwraca wynik wywołania h.

Sygnatura

h przyjmuje trzy argumenty: h(type, props, children). Typ może być nazwą tagu w postaci łańcucha znaków, obiektem komponentu lub komponentem funkcyjnym. props to obiekt zawierający atrybuty, właściwości i zdarzenia. children to tekst, tablica VNodes lub obiekt slotów.

import { h } from "vue";

h(type, props, children);

Prosty element

Przekazanie nazwy tagu i obiektu props zawierającego class tworzy ostylowany element. Trzeci argument to w tym przypadku zwykła treść tekstowa.

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

Props atrybuty

Wszystko trafia do tego samego obiektu props: atrybuty HTML, właściwości DOM, class, style i nasłuchiwacze zdarzeń. Vue ustala, gdzie każda z tych wartości powinna się znaleźć podczas aktualizacji.

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

Tablice elementów podrzędnych

Gdy element ma wiele elementów podrzędnych, jako trzeci argument należy przekazać tablicę VNodes. Każdy element podrzędny jest osobnym wywołaniem h.

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

Przekazywanie null bez propsów

Jeśli element nie ma propsów, jako drugi argument można przekazać null (lub pusty obiekt), aby elementy potomne pozostały na trzeciej pozycji.

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

Renderowanie komponentu

Argumentem type może być zaimportowany komponent. Przekazane propsy stają się propsami tego komponentu.

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

Przekazywanie slotów jako obiektu

Aby przekazać zawartość slotów do komponentu, argument children staje się obiektem funkcji. Każdy klucz to nazwa slotu, a każda wartość to funkcja zwracająca VNodes lub tekst.

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

Nazwane i zakresowe sloty

Wiele slotów oznacza po prostu wiele kluczy. Sloty zakresowe otrzymują swoje propsy jako argument funkcji.

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

Nasłuchiwanie zdarzeń

Zdarzenia są propsami z prefiksem on, po którym następuje nazwa zdarzenia zapisana w PascalCase. Nasłuchiwanie kliknięcia odbywa się za pomocą propa onClick.

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

Zwracanie h z funkcji renderującej

Wewnątrz setup można zwrócić funkcję renderującą zamiast szablonu. Jest ona wywoływana przy każdym ponownym renderowaniu, aby utworzyć drzewo VNode.

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

Szybki test

Jak przekazać komponentowi domyślną zawartość slotu za pomocą h?

Podsumowanie

Funkcja h tworzy VNodes za pomocą h(type, props, children). Type to tag lub komponent, props zawiera atrybuty i nasłuchiwacze onEvent, a children to tekst, tablica VNodes lub obiekt slotów z funkcjami. Funkcje renderujące zwracają wywołania h i uruchamiają się przy każdym ponownym renderowaniu.

Często zadawane pytania

Czy lekcja „Dogłębne omówienie funkcji h()” jest bezpłatna?

Tak — pełny tekst „Dogłębne omówienie funkcji h()” 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 „Dogłębne omówienie funkcji h()”?

Sygnatura h(type, props, children), struktura VNode oraz renderowanie dynamicznych typów komponentów. Ć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 „Dogłębne omówienie funkcji h()”?

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. Dogłębne omówienie funkcji h()
  2. JSX w Vue 3 z Vite
  3. Dynamiczne komponenty z funkcjami render
  4. Wzorzec komponentów wyższego rzędu (HOC)
← Powrót do Vue Academy