Vue Options API 中 render 函数本质是用 JavaScript 手动构造虚拟 DOM，通过 h() 创建 VNode 并跳过模板编译；它定义在组件配置顶层，接收 h 函数、返回 VNode，支持 props、children 和插槽处理。
Vue Options API 中使用 render 函数，本质是用 JavaScript 手动构造虚拟 DOM（VNode），跳过模板编译环节，直接控制渲染逻辑。它不依赖 HTML 模板字符串，而是通过 h() 函数创建 VNode 对象，再由 Vue 渲染器挂载为真实 DOM。关键在于理解 h 的调用方式、render 的执行时机，以及如何组织 props 和 children。
render 函数的定义位置与基本结构
在 Options API 组件中，render 是一个选项方法，写在组件配置对象顶层，与 data、methods 同级：
- 函数接收一个参数：Vue 提供的
h函数（即createElement），用于创建 VNode - 必须返回一个 VNode（或 null），不能返回字符串或数组
- 内部可访问
this，获取响应式数据、插槽、props 等
用 h 函数构建基础 VNode
h 是 hyperscript 缩写，调用形式为 h(type, props, children)：
-
type：字符串（如'div'、'span'）表示原生标签；也可传入组件选项对象或已注册组件 -
props：属性对象，支持 class、style、事件监听（如onClick）、ref、key 等；事件名小写驼峰（onClick），不加v-on:前缀 -
children：可以是字符串（文本节点）、VNode 数组（多个子节点）、或嵌套的h()调用结果
例如：h('button', { onClick: () => this.count++, class: 'btn' }, '点击计数')
立即学习“前端免费学习笔记（深入）”；
处理插槽与动态内容
在 render 函数中访问插槽需通过 this.$slots（Vue 2）或 this.$slots / slots（Vue 3 Options 中仍兼容 $slots）：
-
this.$slots.default获取默认插槽内容，它是一个 VNode 数组，可直接作为children传入h - 具名插槽如
this.$slots.header，同样返回 VNode 数组 - 作用域插槽需调用函数获取 VNode，如
this.$scopedSlots?.footer?.({ msg: 'hello' })（Vue 2）
典型用法：h('div', {}, this.$slots.default || [])
手动实现简易 patch 逻辑（非 Vue 内部，仅作理解）
虽然 Vue 自带完整渲染器，但手写简易 render 有助于理解原理。核心步骤包括：
- 用
document.createElement(tag)创建真实 DOM 元素 - 遍历
props：对onXXX事件用addEventListener绑定；对普通属性用el.setAttribute或直接赋值（如el.className） - 处理
children：若为字符串，用document.createTextNode；若为数组，递归调用同逻辑并appendChild - 最后将生成的元素
appendChild到容器节点
注意：此逻辑仅适用于首次渲染，不包含 diff 和更新机制，真实 Vue 渲染器会在此基础上做精细化比对和最小化 DOM 操作。
