vue渲染函数优化核心是减少vnode创建开销、避免重复计算、控制响应式依赖范围及善用内置机制：复用静态vnode、冻结只读数据、按需访问props、缓存高开销逻辑、优先使用函数式组件。
Vue 组件开发中，渲染函数（render function）比模板更灵活，但也更容易写出低效代码。优化核心在于减少 vnode 创建开销、避免重复计算、控制响应式依赖范围，并善用 Vue 内置机制。
精简 vnode 创建逻辑
每次 render 函数执行都会生成新的 vnode，结构越复杂，开销越大。应尽量：
- 复用已创建的静态 vnode：对不随状态变化的子节点（如固定图标、纯文本标签），在 setup 外预先调用 h() 创建一次，render 中直接引用
- 避免在 render 中拼接字符串或构造深层嵌套对象：例如不要在 h() 的 props 参数里动态计算 class 对象或 style 对象，改用计算属性提前生成
- 用数组解构代替多层嵌套 children：比如 h('div', [...header, ...body, ...footer]) 比嵌套多个 h() 调用更轻量
规避不必要的响应式追踪
render 函数内访问响应式数据会触发依赖收集。若某段数据实际不变，却因被读取而绑定响应，会导致无意义重渲染：
- 大型只读列表（如城市字典、菜单配置）用 Object.freeze() 初始化，阻止 Vue 递归转为响应式
- 将静态配置抽离到 const 常量或 defineComponent 外部作用域，render 中只读取，不访问 reactive/ref 包裹的对象字段
- 避免在 render 中解构响应式对象：如 const { a, b } = props 会触发所有字段的依赖收集；改为按需访问 props.a
合理使用缓存与条件分支
渲染函数没有 v-if/v-for 指令语法糖，但逻辑控制更直接，也更需谨慎：
- 用 if/else 或三元表达式替代无意义的 vnode 条件渲染：例如状态为 false 时返回 null 或空数组 []，而非创建一个 display: none 的 div
- 对高开销的子树渲染逻辑，封装成独立函数并配合 computed 缓存结果（注意：computed 返回的是响应式值，需确保其内部不产生副作用）
- 避免在 render 中调用未 memoized 的复杂函数：如频繁调用 filter/map 处理大数组，应移至 computed 或 onBeforeUpdate 阶段预处理
优先选用函数式组件场景
若组件完全无状态、无生命周期、仅接收 props 渲染，可声明为纯函数组件：
- 省去实例化开销，无 this、无响应式系统介入，render 执行更快
- 适合 Icon、Tag、Badge 等原子级 UI 元素，尤其在大量复用时（如表格每行一个 Tag）性能优势明显
- 注意：函数式组件无法使用 ref、watch、onMounted 等，需确保需求匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
