高效渲染函数的核心是精准控制vnode的创建、复用与更新边界；需稳定key、复用静态vnode、精简响应式依赖、模拟patchflags、避免冗余dom操作与同步布局。
高效渲染函数的核心不是写得多，而是写得准——精准控制虚拟节点（VNode）的创建、复用与更新边界。关键在于让 Vue 知道“哪些该变、哪些不该动”，从而避开无谓的 diff 和 DOM 操作。
显式设置 key 并稳定节点结构
列表或动态结构中缺失或重复的 key 是最常见性能陷阱。Vue 依赖 key 判断节点是否可复用；没有 key 或 key 不稳定（如用 index），会导致整块子树被重建。
- ✅ 正确：用唯一、稳定标识，如
h('li', { key: item.id }, item.text) - ❌ 错误：用索引
h('li', { key: i }, ...)，尤其在增删/排序后会引发大量无效重排 - 静态内容（如固定图标、标题）提前定义为常量 VNode，在多次 render 中直接复用，避免重复构造
精简响应式依赖与计算逻辑
渲染函数本身不追踪依赖，但它会响应 setup 中 ref/computed 的变化。若依赖太宽或计算太重，就会频繁触发全量重绘。
- 大数据集（如万级列表）用
shallowRef包裹原始数组，避免深度代理开销 - 过滤、排序等派生数据统一用
computed封装，确保仅当源头变更时才重新执行 - 禁止在 render 函数内做
JSON.parse、深层map/filter、正则匹配等耗时操作
模拟 Block Tree 与 PatchFlags 思路
Vue 3 编译器通过 Block Tree 划分更新区块、用 PatchFlags 标记变动类型（如 class、style、props）。手写渲染函数可借鉴这一思想提升靶向更新效率。
- 将不变的属性对象（如固定 class、事件监听器）声明为常量，避免每次 render 都新建引用
- 对含动态 props 的节点，确保其 props 对象是新引用（否则 patch 可能跳过更新）
- 插槽内容若可能变化，显式标注
{ $stable: false }，防止父组件错误缓存 slot 函数
规避渲染上下文切换与冗余绑定
虽然渲染函数不直接操作 GPU，但不当的结构设计仍会间接引发浏览器重排、样式失效或强制同步。
- 避免在循环中反复调用
h()构建相同静态结构（如每项都重复写h('span', { class: 'icon' }, [...])） - 动态标签名（如
'h' + level）需严格校验取值范围（1–6），否则触发警告并降级为 div，影响语义与样式 - 不要在 render 中直接修改 DOM 或读取 offsetHeight 等布局属性，以免触发强制同步布局
