使用 v-for 更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。
何时使用何种 key?
vue 采用原地复用策略,虚拟 dom 变化时,两个虚拟 dom 节点的 key 如果一样就不会重新创建节点,而是修改原来的节点。
当渲染的数据不需要保持状态时,例如常见的单纯的表格分页渲染(不包含输入,只是展示)、下拉加载更多等场景,那么使用 index 作为 key 再好不过,因为进入下一页或者上一页时就会原地复用之前的节点,而不是重新创建,如果使用唯一的 id 作为 key 反而会重新创建dom,性能相对较低。
此外使用 index 作为 key 还应该要尽量避免对数组的中间进行 增加/删除 等会影响后面元素 key 变化的操作。这会让 vue 认为后面所有元素都发生了变化,导致多余的对比和原地复用。
所以使用 index 作为 key 需要满足:
- 数据没有独立的状态
- 数据不会进行 增加/删除 等会影响后面元素 key 变化的操作
何时使用 id 作为 key?
分页数据展示,如果使用 id 作为 key,每一页的每一条数据 id 都是不一样的,所以当换页时两颗虚拟DOM树的节点的 key 完全不一致,vue 就会移除原来的节点然后创建新的节点,效率会更加低下。但是它也有它的优点,唯一的 key 可以帮助 diff 更加精确地绑定状态,这尤其适合数据有独立的状态的场景,例如带输入框或者单选框的列表数据。
所以何时使用 id 作为 key:
- 无法使用 index 作为 key 的时候