Vue 3 推荐模板而非 render 函数，因其经编译器生成带静态标记、补丁标志和依赖追踪的优化渲染函数，在性能、类型安全、可维护性与开发体验上具系统性优势。

渲染函数和模板在 Vue 中不是性能高低的简单二选一，而是不同抽象层级下的协作关系——模板最终会被编译为渲染函数，而手写渲染函数跳过了编译环节，带来更直接的控制权。性能差异真实存在，但取决于具体场景、Vue 版本和代码质量。

Vue 3 下：模板通常不比手写 render 慢

Vue 3 的编译器做了大量深度优化，比如静态节点提升、补丁标记（patch flag）、预字符串化等。这些优化让模板编译出的 render 函数，在大多数业务组件中，执行效率与精心编写的手写 render 相当，甚至更高。手动写 render 很难复现编译器自动做的细粒度优化。

• 静态内容（如固定文本、无绑定属性的标签）会被提取为常量，避免重复创建 VNode
• v-if/v-for 等指令被转化为高效的条件分支或扁平化循环，减少运行时判断开销
• 响应式依赖收集更精准，更新粒度更小

手写 render 的真实优势不在“更快”，而在“更可控”

当需要动态生成结构、运行时决定组件类型、嵌套多层逻辑判断、或封装高阶 UI 库时，render 函数才能释放全部能力。它不是为日常页面提速设计的，而是为复杂渲染逻辑提供出口。

• 可基于 props 或插槽内容实时计算标签名（如 h('h' + level)）
• 能对子节点数组做任意过滤、映射、分组后再传入 h()，比如只渲染 visible 列
• 可直接操作 VNode 配置对象（attrs、on、class、style），无需指令语法约束
• 支持函数式组件、slots.default / slots.named 的精细分发，适合封装弹窗、表格、表单生成器等

JSX 是 render 的语法糖，不是第三种方式

JSX 在 Vue 中本质仍是调用 h() 函数，只是把嵌套调用写得更接近 HTML 结构。它不改变底层机制，但提升了 render 函数的可读性和开发体验。相比纯 h() 链式调用，JSX 更易维护，尤其在有深层嵌套和事件处理的场景下。

• 写法上更贴近模板直觉，又保有 JS 全部表达力
• 支持 TypeScript 类型推导更友好
• 构建工具（如 Vite + @vitejs/plugin-vue-jsx）已原生支持，无额外成本

什么时候该选哪个？看这三点

不用纠结“哪个更快”，重点看需求是否超出模板能力边界：

• 选模板：常规页面、表单、列表、带 v-if/v-for 的静态结构；团队协作多、设计师参与模板调整；需要快速迭代和调试
• 选 render / JSX：开发 UI 组件库、主题引擎、低代码渲染器；需根据 schema 动态生成任意 DOM 结构；必须精细控制 VNode 属性或生命周期钩子注入点
• 避免纯性能驱动切换：除非压测明确发现某模板组件是瓶颈，且手写 render 后实测提升显著（如大数据量虚拟滚动、高频重绘区域），否则优先保障可维护性