0Pricing
Vue Academy · Aula

A função h() em detalhes

Assinatura h(type, props, children), estrutura de VNode e renderização de tipos de componentes dinâmicos.

A função h() em detalhes é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O que é a função h

A função h (abreviação de hiperscript) cria nós virtuais do DOM diretamente em JavaScript. Ela é a base para a qual os modelos são compilados. Uma função de renderização retorna o resultado da chamada de h.

A assinatura

h recebe três argumentos: h(type, props, children). O tipo pode ser uma cadeia de caracteres com o nome de uma tag, um objeto de componente ou um componente funcional. Propriedades é um objeto de atributos, propriedades e eventos. Filhos podem ser texto, um conjunto de nós virtuais ou um objeto de slots.

import { h } from "vue";

h(type, props, children);

Um elemento simples

Passar o nome de uma tag e um objeto de propriedades com uma class produz um elemento estilizado. O terceiro argumento aqui é um conteúdo de texto simples.

import { h } from "vue";

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

Propriedades versus atributos

Tudo vai para o mesmo objeto de propriedades: atributos HTML, propriedades do DOM, class, style e ouvintes de eventos. O Vue determina a qual categoria cada item pertence no momento da atualização.

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

Conjuntos de filhos

Quando um elemento tem vários filhos, passe um conjunto de nós virtuais como terceiro argumento. Cada filho é, por si só, uma chamada a h.

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

Passando null sem propriedades

Se um elemento não tiver propriedades, você poderá passar null (ou um objeto vazio) como segundo argumento, para que os filhos permaneçam na terceira posição.

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

Renderizando um componente

O argumento de tipo pode ser um componente importado. As propriedades que você passar se tornarão as propriedades desse componente.

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

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

Passando áreas de conteúdo como objeto

Para passar conteúdo de área a um componente, o argumento de filhos se torna um objeto de funções. Cada chave é o nome de uma área de conteúdo, e cada valor é uma função que retorna nós virtuais ou texto.

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

Áreas de conteúdo nomeadas e com escopo

Várias áreas de conteúdo são apenas várias chaves. As áreas de conteúdo com escopo recebem suas propriedades como argumento da função.

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

Ouvintes de eventos

Os eventos são propriedades com o prefixo on seguido do nome do evento em PascalCase. Um ouvinte de clique é a propriedade onClick.

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

Retornando h de uma função de renderização

Dentro de setup, você pode retornar uma função de renderização em vez de um modelo. Ela é chamada a cada nova renderização para produzir a árvore de nós virtuais.

import { h, ref } from "vue";

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

Verificação rápida

Como você passa o conteúdo padrão de uma área de conteúdo a um componente usando h?

Recapitulação

A função h cria nós virtuais com h(type, props, children). O tipo é uma tag ou um componente, as propriedades contêm atributos e ouvintes onEvent, e os filhos podem ser texto, uma matriz de nós virtuais ou um objeto de áreas de conteúdo com funções. As funções de renderização retornam chamadas de h e são executadas a cada nova renderização.

Perguntas Frequentes

A aula “A função h() em detalhes” é grátis?

Sim — o texto completo de “A função h() em detalhes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “A função h() em detalhes”?

Assinatura h(type, props, children), estrutura de VNode e renderização de tipos de componentes dinâmicos. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “A função h() em detalhes”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. A função h() em detalhes
  2. JSX no Vue 3 com Vite
  3. Componentes dinâmicos com funções render
  4. Padrão de componentes de ordem superior (HOC)
← Voltar para Vue Academy