每日讯息!关于 Vue 列表渲染 key 绑定 index 的性能问题

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

2023-03-21 15:14:07 来源：博客园

(资料图)

今天在学习 React 文档，列表渲染一节中提及到一个关于 key 绑定索引值（index）性能的问题：

React 官方文档原文：“如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题”。

查阅网上的博客，确实有对 Vue 列表渲染 key 绑定索引值问题的探讨。Vue 官方文档有说，但没有 React 文档说得大白话，所以有的人没有注意到这个点，Vue 官方文档原文：“提供一个唯一的 key attribute”。

通过两个案例，可以直观的感受到绑定 index 和绑定唯一标识符的区别。

1️⃣ 绑定 index 的动态列表：

            {{ item.name }}

仔细观察图，每删除一个 li，其余的 li 都跟着闪烁，key 是帮助 React、Vue 识别哪些元素改变了，但由于数组删除，其 index 要重新排序，所以每一个 li 绑定的 index 都变化了，这样不合适，除非是静态列表。

2️⃣ 绑定 number、string 等唯一的基础类型，不是 index 因数组变化而重新排序的序号：

删除一个 li，其余的 li 没有闪烁。这是因为 id 是唯一的，不会因为删除而重新排序。这种小型的列表随便绑定 key 都无所谓，一旦数据量大了，问题就出现了。

关键词：