render Render Function
Last updated: 2026-10-22
render Render Function
The render option returns virtual nodes instead of template markup — for fully programmatic structures.
| Group | Options: Rendering & Lifecycle |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
import { h } from "vue"
export default {
render() { return h("p", this.msg) }
}⚙️ Arguments
| value | A function returning h()-created virtual nodes |
|---|
Returns：A virtual node (VNode)
▶ Example
Edit the code below and see the live result:
Output：
Renders three list items: Item 1, Item 2, Item 3.💡 Key Points
ℹ️ Note Templates compile to render functions — templates read better, render is more flexible.
💡 Tip Useful for dynamic tags, deep nesting and programmatic structures.
⚠️ Warning No directives inside render — express v-if/v-for with plain JavaScript.
🏷️ Related Rendering & Lifecycle
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q When is render required?
A When tag names or nesting depend on data.
Q Relation to JSX?
A JSX compiles to h() calls — the same thing with nicer syntax.
Q Is it reactive?
A Yes — accessing this.xxx tracks dependencies.
