手动编写 render 函数本质是跳过模板编译，直接用 JavaScript 调用 h 函数创建 VNode，由 Vue 渲染器生成真实 DOM，适用于高度动态、逻辑复杂或需精细控制渲染的场景。
手动编写 render 函数，本质是跳过模板编译阶段，直接用 JavaScript 创建 VNode（虚拟节点），由 Vue 渲染器负责生成真实 DOM。它适合高度动态、逻辑复杂或需精细控制渲染流程的场景，比如封装高阶组件、实现条件化插槽分发、构建运行时 UI 构建器等。
理解 render 函数的基本结构与参数
render 是一个接收 h（即 createElement 的简写）作为唯一参数的函数，返回一个 VNode。Vue 3 中 h 是全局导入的函数，不是 this 上的方法：
-
h(标签名/组件, 属性对象, 子节点)—— 最常用签名 - 属性对象支持
class、style、on（事件监听器，如{ onClick: handler }）、props、attrs、ref等 - 子节点可以是字符串、VNode、VNode 数组，或返回 VNode 的函数（用于作用域插槽）
手写常见 UI 模式：条件渲染与列表
模板中 v-if 和 v-for 在 render 函数中转为原生 JS 逻辑：
- 条件渲染用三元或 if/else：例如
showHeader ? h('header', [...]) : null - 列表渲染用
map：例如items.map(item => h('li', { key: item.id }, item.name))，key 必须显式提供，否则会触发警告 - 避免在 render 中做 heavy 计算；如有必要，提前在
computed或setup中处理好数据
精准控制插槽：默认插槽、具名插槽与作用域插槽
插槽在 render 中通过 slots 对象访问，它是函数类型：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 默认插槽：
slots.default?.()（可选链防止 undefined 调用） - 具名插槽：
slots.header?.()、slots.footer?.() - 作用域插槽：传参调用，如
slots.item?.({ data: item, index })，子组件内用h包裹并透传上下文 - 若需重写插槽内容（如包装、过滤、添加 wrapper），直接在
h调用中组合即可，无需依赖v-slot语法
高级技巧：创建函数式组件与手动 patch 控制
函数式组件（无状态、无实例）天然适配 render 函数风格：
- 导出纯函数，接收
{ props, slots, attrs }，返回 VNode - 利用
attrs透传非 prop 属性到根元素，避免手动罗列 - 不推荐手动触发 patch（如模拟
forceUpdate），但可通过响应式依赖（ref、computed）自然触发重渲染 - 调试时可用
console.log(h(...))查看生成的 VNode 结构，注意其是普通 JS 对象，含type、props、children等字段
不复杂但容易忽略：render 函数内没有 this，所有响应式数据、方法、插槽都需从 setup 返回或通过参数显式传入；保持函数纯净，副作用（如 API 调用、DOM 操作）仍应在生命周期钩子或事件处理器中完成。
