La fonction h() en profondeur
Signature h(type, props, children), structure VNode et rendu de types de composants dynamiques
La fonction h() en profondeur est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Qu’est-ce que la fonction h ?
La fonction h (abréviation de hyperscript) crée directement des nœuds du DOM virtuel en JavaScript. C’est la base vers laquelle les modèles sont compilés. Une fonction de rendu renvoie le résultat de l’appel à h.
La signature
h accepte trois arguments : h(type, props, children). Le type peut être une chaîne contenant un nom de balise, un objet composant ou un composant fonctionnel. Les props sont un objet contenant les attributs, propriétés et événements. Les children peuvent être du texte, un tableau de nœuds du DOM virtuel ou un objet d’emplacements.
import { h } from "vue";
h(type, props, children);Un élément simple
La transmission d’un nom de balise et d’un objet de propriétés contenant une class produit un élément mis en forme. Le troisième argument est ici un simple contenu textuel.
import { h } from "vue";
h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>Propriétés et attributs
Tout est placé dans le même objet de propriétés : attributs HTML, propriétés du DOM, class, style et écouteurs d’événements. Vue détermine où chacun doit être appliqué lors de la phase de mise à jour.
h("input", {
type: "text",
value: "hello",
class: "field",
placeholder: "Type here"
});Tableaux d’enfants
Lorsqu’un élément possède plusieurs enfants, transmettez un tableau de nœuds du DOM virtuel comme troisième argument. Chaque enfant est lui-même le résultat d’un appel à h.
h("ul", null, [
h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>Passer null lorsqu'il n'y a pas de propriétés
Si un élément n'a pas de propriétés, vous pouvez transmettre null (ou un objet vide) comme deuxième argument afin que les enfants restent à la troisième position.
h("ul", null, [
h("li", null, "first"),
h("li", null, "second")
]);Rendre un composant
L'argument de type peut être un composant importé. Les propriétés que vous transmettez deviennent les propriétés de ce composant.
import { h } from "vue";
import MyComponent from "./MyComponent.vue";
h(MyComponent, { title: "Hello" });Transmettre des emplacements sous forme d'objet
Pour transmettre le contenu d'un emplacement à un composant, l'argument des enfants devient un objet de fonctions. Chaque clé est un nom d'emplacement et chaque valeur est une fonction qui renvoie des nœuds V ou du texte.
h(MyComponent, { title: "Hello" }, {
default: () => "slot content"
});Emplacements nommés et avec portée
Plusieurs emplacements correspondent simplement à plusieurs clés. Les emplacements avec portée reçoivent leurs propriétés comme argument de la fonction.
h(MyComponent, null, {
header: () => h("h1", null, "Title"),
default: (props) => h("p", null, props.text)
});Écouteurs d'événements
Les événements sont des propriétés préfixées par on, suivies du nom de l'événement en PascalCase. Un écouteur de clic est la propriété onClick.
h("button", {
onClick: () => console.log("clicked")
}, "Press me");Retourner h depuis une fonction de rendu
À l'intérieur de setup, vous pouvez retourner une fonction de rendu au lieu d'un modèle. Elle est appelée à chaque nouveau rendu pour produire l'arbre de nœuds V.
import { h, ref } from "vue";
export default {
setup() {
const count = ref(0);
return () => h("button", {
onClick: () => count.value++
}, "Count: " + count.value);
}
};Vérification rapide
Comment transmettre le contenu de l'emplacement par défaut à un composant à l'aide de h ?
Récapitulatif
La fonction h construit des nœuds V avec h(type, props, children). Le type est une balise ou un composant, les propriétés contiennent les attributs et les écouteurs onEvent, et les enfants sont du texte, un tableau de nœuds V ou un objet d'emplacements contenant des fonctions. Les fonctions de rendu retournent des appels à h et s'exécutent à chaque nouveau rendu.
Questions Fréquemment Posées
La leçon « La fonction h() en profondeur » est-elle gratuite ?
Oui — le texte complet de « La fonction h() en profondeur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « La fonction h() en profondeur » ?
Signature h(type, props, children), structure VNode et rendu de types de composants dynamiques Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « La fonction h() en profondeur » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La fonction h() en profondeur
- JSX dans Vue 3 avec Vite
- Composants dynamiques avec les fonctions render
- Modèle des composants d’ordre supérieur (HOC)