render Render function
Última atualização: 2026-10-22
render Render function
A opção render retorna nós virtuais em vez de marcação de template — para estruturas totalmente programáticas.
| Grupo | Opções: Renderização e Ciclo de Vida |
|---|---|
| Tipo | Opção |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
import { h } from "vue"
export default {
render() { return h("p", this.msg) }
}⚙️ Argumentos
| value | Uma função que retorna nós virtuais criados com h() |
|---|
Retorno：Um nó virtual (VNode)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Renders three list items: Item 1, Item 2, Item 3.💡 Pontos-chave
ℹ️ Nota Templates compilam para render functions — templates são mais legíveis, render é mais flexível.
💡 Dica Útil para tags dinâmicas, aninhamento profundo e estruturas programáticas.
⚠️ Aviso Sem diretivas dentro do render — expresse v-if/v-for com JavaScript puro.
🏷️ Renderização e Ciclo de Vida relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Quando o render é obrigatório?
R Quando nomes de tags ou o aninhamento dependem de dados.
P Relação com JSX?
R JSX compila para chamadas h() — a mesma coisa com sintaxe mais agradável.
P É reativo?
R Sim — acessar this.xxx rastreia dependências.
