key 必须用稳定唯一 id（如 item.id），禁用 index 或随机值，配合虚拟滚动和计算属性预处理才能高效渲染大型列表。
处理大型列表渲染时，key 值不是可选项，而是必须项——它直接决定 Vue 的 diff 算法能否精准复用节点、避免错位重绘、保住表单状态和动画连续性。不设 key 或设错 key，轻则卡顿、重则数据错乱。
必须用稳定唯一 ID 作 key
后端返回的主键（如 item.id、item.uuid）是最优选择。它天然稳定、全局唯一，无论列表插入、删除、排序还是跨页刷新，都能让 Vue 准确匹配新旧节点。
- ✅ 推荐写法：
:key="item.id"或:key="item.productCode" - ⚠️ 若暂无 ID，可构造业务级稳定 key，例如
:key="item.category + '-' + item.sku"，确保同一数据项在不同渲染中生成相同字符串 - ❌ 禁用
:key="index"：一旦增删或排序，索引错位，Vue 会复用错误 DOM，导致输入框内容错位、子组件状态丢失
避免动态/临时 key 破坏复用
key 值一旦变化，Vue 就会销毁旧组件、新建新组件——这在列表中是昂贵操作，尤其含内部状态或异步逻辑的子组件。
- ❌ 不要用
:key="Math.random()"、:key="+new Date()"或:key="item.timestamp"（若 timestamp 可变） - ✅ 如需强制重渲染某一项（如刷新详情），应只更新该项对应的数据对象，而非靠随机 key “骗”Vue 重建
- ? 对纯展示型子组件，若确实需隔离响应式，可用
v-once或冻结数据（Object.freeze()），比换 key 更轻量
配合虚拟滚动控制实际渲染量
即使 key 正确，上万条数据全量 v-for 仍会拖垮内存与帧率。key 是 diff 的前提，但前提是“只渲染可视区域”。
- 超过 100 条建议启用虚拟滚动：Vue 3 推荐
@vueuse/core/useVirtualList，Vue 2/3 兼容可用vue-virtual-scroller - 虚拟滚动本身依赖 key 正确——它内部仍靠 key 匹配缓冲区中的节点，错误 key 会导致滚动闪烁或空白
- 搭配使用：虚拟容器 + 稳定 key + 子组件边界（如
<productitem :key="item.id"></productitem>），三者缺一不可
复杂列表用计算属性预过滤，别让 v-for 承担逻辑
v-for 直接绑定原始数组 + 内联 filter/map，每次响应式变更都会触发整个列表重新比对，key 再准也救不了性能。
- ✅ 改用计算属性预处理：
computed: { filteredItems() { return this.allItems.filter(...).sort(...) } }，模板只写v-for="item in filteredItems" - ✅ 多条件筛选时，用
watch或computed缓存结果，避免重复计算 - ? 若筛选频繁且数据量大，可考虑前端分页或服务端聚合，减少客户端运算压力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
