`render` 函数是 Vue 中用于**手动创建虚拟 DOM 节点（VNode）** 的核心机制，它提供比模板（template）更灵活、更强大的编程能力

render函数是 Vue 中用于手动创建虚拟 DOM 节点VNode的核心机制它提供比模板template更灵活、更强大的编程能力。其类型定义为Type:(createElement:()VNode)VNode// 或更准确地说含 functional contextType:(h:CreateElement,ctx?:RenderContext)VNode其中h常简写为createElementVue 2 中常用hVue 3 中为h函数本质是createVNode的别名用于创建 VNode返回值必须是一个 VNode或数组但根节点需为单个 VNode在Vue 2 的函数式组件中第二个参数context提供props、children、slots、data等上下文信息在Vue 3中render函数签名升级为(props, { slots, attrs, emit }) VNode且h是从vue显式导入的import { h } from vuerender函数的优先级高于任何模板包括template选项和挂载元素内的 HTML 模板即只要定义了renderVue 就忽略模板编译。✅ 示例Vue 3import{h}fromvueexportdefault{props:[msg],render(){returnh(div,{class:hello},[h(h1,this.msg),h(p,This is rendered via JS!)])}}⚠️ 注意render函数中无法直接访问thisVue 3 组合式 API 下需用setup()返回上下文Vue 3 推荐优先使用setup()script setup语法糖render主要用于高阶组件、UI 库或特殊渲染逻辑场景。renderType: (createElement: () VNode) VNode Details: An alternative to string templates allowing you to leverage the full programmatic power of JavaScript. The render function receives a createElement method as it’s first argument used to create VNodes. If the component is a functional component, the render function also receives an extra argument context, which provides access to contextual data since functional components are instance-less. The render function has priority over the render function compiled from template option or in-DOM HTML template of the mounting element which is specified by the el option. See also: Render Functions