当组件逻辑频繁触发不必要实例创建、插槽处理复杂或模板重复判断多时，应改用渲染函数；它减少VNode冗余和响应式代理开销，灵活处理动态插槽、运行时标签/属性计算、无状态展示组件及精细VNode控制。
当组件逻辑开始频繁触发不必要的实例创建、插槽处理变复杂、或模板中出现大量重复判断时，就该考虑用渲染函数替代 template 了。它不增加实例数量，反而能减少冗余 VNode 和响应式代理开销。
插槽结构动态变化时
比如需要遍历默认插槽子节点、包裹容器、动态插入分隔符或折叠提示，template 很难干净实现。渲染函数可直接访问 $slots.default，逐个处理 vnode，灵活添加 class、style、事件，甚至根据 DOM 宽度重排节点顺序。
- 典型场景：溢出折叠列表（
<overflow-list>）、标签云、动态表单标题栏 - 关键点：插槽内容不是静态结构，而是需运行时分析、拆解、重组的 vnode 数组
标签或属性需运行时计算时
像动态标题（<h1>～<h6>）、权限控制的按钮类型（button / a / span）、根据数据类型自动选用 input 或 select，用 v-if 链写 template 易冗余且难维护。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 渲染函数只需一行：
h(`h${this.level}`, this.$slots.default) - 属性也可动态拼接：
h('input', { attrs: { type: this.inputType } })
避免无谓的响应式代理和实例化开销时
functional 组件（无状态）配合 render 函数，不创建组件实例，不代理 data/props，也不触发 beforeCreate 等生命周期。适合纯展示型、高复用、低耦合的 UI 封装，如图标组件、文本装饰器、布局包装器。
立即学习“前端免费学习笔记（深入）”；
- 对比：普通组件每次使用都会新建实例，哪怕只传几个 props
- 注意：Vue 3 中 functional 已被移除，但 setup + h 仍可达到同样轻量效果
需要精细控制虚拟 DOM 结构时
当必须干预 vnode 的 key、ref、指令（如自定义指令参数）、或手动合并多个插槽内容（如 default + footer + overflow），render 函数提供完整 JavaScript 控制力，而 template 语法无法表达这类组合逻辑。
- 例如：为每个子 vnode 注入统一的 key 前缀，或在末尾强制插入一个带 ref 的占位节点
- 优势：绕过模板编译限制，直操作 VNode 树，更贴近 Vue 渲染本质
