Vue.js 渲染函数通过 h() 直接创建 VNode，实现动态组件切换、插槽透传与结构定制；支持字符串标签、组件引用、配置对象及嵌套子节点，需确保组件可用并避免副作用。
Vue.js 中，渲染函数（render function）是绕过模板、用 JavaScript 直接描述虚拟 DOM 的核心机制。它不依赖 HTML 字符串，而是通过 h() 函数（即 createElement）生成 VNode，从而实现对渲染逻辑的完全动态控制——比如根据状态切换组件、条件拼接结构、运行时决定标签类型或属性，甚至透传插槽与事件。
用 h() 创建基础 VNode
render 函数接收 h 作为第一个参数，它是创建虚拟节点的工厂函数。基本调用形式为：h(标签名/组件, 配置对象, 子节点)。
- 标签名可以是字符串（如 'div'、'span'），也可以是已注册的组件或导入的组件选项对象
- 配置对象支持 props（对应 v-bind）、on（对应 v-on）、class、style、ref 等字段
- 子节点可以是字符串、VNode 数组，或由 h() 递归生成的嵌套结构
动态决定渲染什么组件
当需要根据数据实时切换不同组件时，直接把组件引用传给 h() 即可，无需 <component :is="..."> 模板写法。
- 例如：用户登录状态变化时，
h(this.isLoggedIn ? UserPanel : LoginBox) - 组件可来自 import、全局注册，或局部定义的对象（含 name、props、render 等）
- 注意：若组件未正确导出或未在上下文中可用，会报 “Invalid component” 错误
灵活处理插槽与作用域插槽
render 函数中可通过 this.$slots 和 this.$scopedSlots（Vue 2）或 context.slots（Vue 3）访问插槽内容，并按需包裹、过滤或重排。
立即学习“前端免费学习笔记（深入）”；
-
this.$slots.default返回默认插槽的 VNode 数组，可直接透传或加工后返回 - 具名插槽如
this.$slots.header可单独提取并插入到指定位置 - 作用域插槽需调用其函数（如
this.$scopedSlots.item({ item })）获取 VNode
封装可复用的渲染逻辑
复杂结构建议拆解为独立函数，提升可读性与测试性。例如封装一个带 icon 和 loading 状态的按钮：
- 定义
renderButton(h, { label, icon, loading })，内部判断 loading 并返回不同 VNode - 在主 render 中调用：
return renderButton(h, this.$props) - 避免在 render 中执行副作用（如修改 data），只做纯渲染计算
