为什么 Vue 不建议用 index 或随机数作为 key？
最新回答
Dreams°終遇妳
2026-10-26 18:43:54
Vue 不建议用 index 或随机数作为 key 的原因如下：
一、key 的作用
在 Vue 中，key 是用来唯一标识列表每一项的，就像身份证号码那样。它的作用主要有两个：
- 定位更新：当数据发生变化时，Vue 会通过 key 来对比新旧节点，快速找到改动的地方。如果没有 key，Vue 就只能从头开始一个个比，效率会很低。
- 状态正确：key 能让 Vue 知道每个节点对应的是什么数据，确保在数据变化时，节点的状态不乱套。
二、为什么不能用 index
列表增删导致状态错乱：
当使用 index 作为 key 时，如果列表中的某一项被删除，那么该项后面的所有项的 index 都会发生变化。这会导致 Vue 在更新 DOM 时，错误地复用节点，从而导致页面显示错乱。
拖拽排序出问题：
在拖拽排序的场景中，如果 key 是 index，那么当用户拖拽列表项改变顺序时，Vue 会认为这些项的 key 没有变化，从而复用原来的 DOM 节点。这会导致数据已经改变，但 DOM 节点显示的内容还是原来的，造成显示错误。
三、为什么不能用随机数
- 切换分页，列表疯狂重渲染：
如果使用随机数作为 key，那么每次渲染列表时，每个项的 key 都会变化。这会导致 Vue 认为所有的节点都是新的，从而销毁旧的 DOM 节点并创建新的 DOM 节点。这不仅会浪费性能，还可能导致用户输入的状态丢失。
四、实际开发中应该怎么写 key
用唯一的 id（最佳选择）：
如果数据有唯一的 id（比如数据库里的主键），那么应该直接使用这个 id 作为 key。因为 id 是稳定且唯一的，无论数据如何变化，key 都不会乱。
没有 id 的情况下怎么办：
生成唯一标识符：可以在加载数据时给每项生成一个唯一的标识符，比如使用 index 和当前时间的组合来生成一个唯一的 id。
用 JSON 字符串：如果数据内容是稳定的，可以使用 JSON 序列化后的字符串作为 key。但这种方法适合小型列表，数据量大的时候性能可能会受影响。
总结：
- 使用 index 作为 key 会导致节点复用错误，页面显示乱套，增删数据时 DOM 状态可能不对应，影响用户体验。
- 使用随机数作为 key 会导致每次渲染都生成新节点，性能下降，用户输入等状态会丢失，用户体验差。
- 正确的做法是，如果数据有唯一的 id，直接用它；如果没有 id，生成一个唯一标识符或者用稳定的内容生成 key。
热门标签
