Vue渲染函数性能优化关键在于减少vnode创建、避免重复计算、控制响应式开销，并善用缓存复用机制：提取静态节点为常量，用computed缓存派生数据，合理设置key与v-memo，对大型只读数据使用markRaw或shallowRef，避免render中执行未缓存方法，结合SSR/构建层缓存提升首屏效率。
Vue 渲染函数（Render Function）比模板更底层、更灵活，但也更容易写出低效代码。性能优化的关键在于减少不必要的虚拟 DOM 创建、避免重复计算、控制响应式开销，并善用 Vue 提供的缓存与复用机制。
精简渲染逻辑，减少 vnode 创建
每次调用 render 函数都会生成新的 vnode 树。若逻辑冗余或条件分支过多，会增加创建成本：
- 把静态内容提前提取为常量 vnode，用 v-once 或直接缓存（如
const staticNode = h('div', '固定标题')），避免每次执行都重建 - 避免在 render 中做复杂对象拼接、数组 map/filter 等操作；改用 computed 缓存结果，render 中只读取
- 不用
h动态构造大量嵌套节点，可考虑拆分为子组件或使用 函数式组件（无实例开销，适合纯展示）
合理利用 key 与 v-memo 控制更新粒度
render 函数中手动写 v-for 类似逻辑时，key 的作用和模板中一致——决定节点是否复用：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 必须为每个动态 vnode 设置稳定唯一的 key（如
item.id），禁用index或随机值 - 对局部子树有固定依赖的场景，可用 v-memo 指令（Vue 3.2+）跳过未变化部分的 diff：
h('div', { 'v-memo': [item.id, item.status] }, [...children]) - 当某段结构完全不依赖响应式数据，可用 h(null, ...) 或直接返回静态 vnode，跳过响应式追踪
降低响应式穿透与计算开销
render 函数本身不触发响应式，但内部访问的响应式数据会建立依赖。深层或大型数据易引发性能问题：
立即学习“前端免费学习笔记（深入）”；
- 对只读的大型列表或配置对象，用 markRaw 包裹，防止被 proxy 代理：
const rawData = markRaw(largeConfig)，再传入 render - 仅需监听根属性变化时，用 shallowRef 或 shallowReactive 替代 ref/reactive
- 避免在 render 中调用未缓存的方法（如
formatDate(item.time)），应提前在 setup 或 computed 中处理好
结合服务端/构建层缓存提升首屏效率
对于 SSR 或预渲染场景，render 函数的执行频率高，可借助外部缓存进一步减负：
- 在 Express + express-vue 环境中，启用 LRU 缓存并设合理
max和maxAge（如生产环境缓存 100 个页面、1 小时） - 迁移至 Webpack 渲染器（
webpack: true配置），利用编译期优化提前生成高效渲染代码 - 静态内容较多的页面，可配合 prerender-spa-plugin 或 Vite 的 ssg 模式生成 HTML 静态文件
