vue.js渲染函数列表性能优化核心是绕过模板编译、精准控制vnode、减少响应式追踪、避免无效diff；需用shallowref+静态vnode、稳定唯一key、预处理数据、异步组件拆分。
Vue.js 渲染函数（render function）渲染列表时，性能优化的核心在于：绕过模板编译开销、精准控制 vnode 创建、减少响应式追踪粒度、避免无意义 diff。相比模板语法，render 函数更底层、更灵活，但也更易写出低效代码——关键不是“能不能写”，而是“怎么写才不拖慢页面”。
用 shallowRef + 静态 vnode 提升初始化速度
当列表数据量大（如 500+ 条）且纯展示、无逐项响应式需求时，直接用 shallowRef 包裹原始数组，再在 render 函数中手动创建 vnode，可跳过 Vue 对每个 item 的 reactive 代理和依赖收集。
- 避免使用
ref(list)或reactive(list)存储全量数据 - 改用
const list = shallowRef(rawData)，仅顶层响应式 - 在 render 中遍历 list.value，用
h('div', { key: item.id }, item.name)直接生成 vnode，不包裹响应式逻辑 - 若某字段完全静态（如版权文案），可用
h('span', { staticClass: 'footer' }, '© 2026')或v-once等效写法（render 中通过h的 props 显式标记）
key 必须稳定唯一，禁用 index
render 函数中 h 的 props 里传入 key，其作用与模板中一致：为 diff 提供节点身份标识。但 render 函数不会自动警告你 key 不合法，错误成本更高。
-
key必须来自业务唯一字段（如item.id），不可用index—— 插入/删除后会导致组件状态错位、动画异常、输入框失焦 - 若数据无 ID，提前生成稳定哈希（如
createHash(item.title + item.timestamp)），而非每次 render 临时计算 - 确保 key 类型一致（全部字符串或全部数字），避免
'1'和1被视为不同 key
避免在 render 中做计算或过滤
render 函数应保持“纯”——只负责把已有状态转成 vnode。任何数据转换（如 filter、map、sort）都应在 computed 或 setup 中预处理，否则每次 patch 都会重复执行，且无法缓存。
- 错误写法：
list.value.filter(x => x.active).map(item => h('li', { key: item.id }, item.name)) - 正确做法：定义
const filteredList = computed(() => list.value.filter(x => x.active))，render 中只遍历filteredList.value - 若过滤逻辑复杂或依赖外部状态，用
watchEffect预计算并缓存结果，render 只读取最终数组引用
复杂子项用 defineAsyncComponent + v-memo（Vue 3.2+）
当列表每项包含重型子组件（如带图表的卡片、富文本编辑器），直接在 render 中 h(HeavyCard, { ... }) 会导致首屏卡顿、内存飙升。
- 用
defineAsyncComponent(() => import('./HeavyCard.vue'))拆分代码，配合<suspense></suspense>控制加载态 - 在 render 中对每项调用
h(AsyncCard, { data: item, key: item.id })，不传冗余 props - 若卡片结构固定、仅数据变化，可在
h的 props 中添加memo: [item.id, item.status]（需搭配v-memo的等效逻辑，或自行 shallowCompare 判断是否跳过更新） - 更推荐：将卡片封装为独立组件，在其内部用
v-memo或shouldUpdate（通过onVnodeBeforeUpdate）控制局部更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
