Análisis profundo de la función h()
Firma h(type, props, children), estructura de VNode y renderizado de tipos de componentes dinámicos
Análisis profundo de la función h() es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Qué es la función h
La función h (abreviatura de hyperscript) crea nodos del DOM virtual (VNodes) directamente en JavaScript. Es la base en la que se convierten las plantillas al compilarlas. Una función de renderizado devuelve el resultado de llamar a h.
La signatura
h acepta tres argumentos: h(type, props, children). El type puede ser una cadena con el nombre de una etiqueta, un objeto de componente o un componente funcional. props es un objeto de atributos, propiedades y eventos. children es texto, una matriz de VNodes o un objeto de slots.
import { h } from "vue";
h(type, props, children);Un elemento sencillo
Pasar el nombre de una etiqueta y un objeto de props con una class produce un elemento con estilos. El tercer argumento de este ejemplo es contenido de texto sin formato.
import { h } from "vue";
h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>Props frente a atributos
Todo se incluye en el mismo objeto props: atributos HTML, propiedades del DOM, class, style y escuchadores de eventos. Vue determina dónde corresponde cada elemento al aplicar los cambios.
h("input", {
type: "text",
value: "hello",
class: "field",
placeholder: "Type here"
});Matrices de elementos hijos
Cuando un elemento tiene varios elementos hijos, pase una matriz de VNodes como tercer argumento. Cada elemento hijo es, a su vez, una llamada a h.
h("ul", null, [
h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>Pasar null cuando no hay props
Si un elemento no tiene props, puede pasar null (o un objeto vacío) como segundo argumento para que los elementos secundarios permanezcan en la tercera posición.
h("ul", null, [
h("li", null, "first"),
h("li", null, "second")
]);Renderizar un componente
El argumento type puede ser un componente importado. Las props que pase se convierten en las props de ese componente.
import { h } from "vue";
import MyComponent from "./MyComponent.vue";
h(MyComponent, { title: "Hello" });Pasar slots como objeto
Para pasar contenido de slot a un componente, el argumento children se convierte en un objeto de funciones. Cada clave es el nombre de un slot y cada valor es una función que devuelve VNodes o texto.
h(MyComponent, { title: "Hello" }, {
default: () => "slot content"
});Slots con nombre y con ámbito
Varios slots son simplemente varias claves. Los slots con ámbito reciben sus props como argumento de la función.
h(MyComponent, null, {
header: () => h("h1", null, "Title"),
default: (props) => h("p", null, props.text)
});Listeners de eventos
Los eventos son props con el prefijo on seguido del nombre del evento en PascalCase. Un listener de clic es la prop onClick.
h("button", {
onClick: () => console.log("clicked")
}, "Press me");Devolver h desde una función de renderizado
Dentro de setup puede devolver una función de renderizado en lugar de una plantilla. Esta función se llama en cada nuevo renderizado para producir el árbol de VNode.
import { h, ref } from "vue";
export default {
setup() {
const count = ref(0);
return () => h("button", {
onClick: () => count.value++
}, "Count: " + count.value);
}
};Comprobación rápida
¿Cómo se pasa el contenido del slot predeterminado a un componente mediante h?
Resumen
La función h crea VNodes con h(type, props, children). type es una etiqueta o un componente, props contiene los atributos y los listeners onEvent, y children puede ser texto, un array de VNodes o un objeto de slots compuesto por funciones. Las funciones de renderizado devuelven llamadas a h y se ejecutan en cada nuevo renderizado.
Preguntas frecuentes
¿La lección «Análisis profundo de la función h()» es gratis?
Sí — el texto completo de «Análisis profundo de la función h()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Análisis profundo de la función h()»?
Firma h(type, props, children), estructura de VNode y renderizado de tipos de componentes dinámicos Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Análisis profundo de la función h()»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Análisis profundo de la función h()
- JSX en Vue 3 con Vite
- Componentes dinámicos con funciones render
- Patrón de componentes de orden superior (HOC)