Vue中为何不用索引index作key？diff算法的奥秘何在？

本文共计4065个文字，预计阅读时间需要17分钟。

前言：Vue 中的 key 是做什么的？为什么不建议使用 index 作为 key？

通常听到这样的问题，本章文章将从原理来一探究竟。另外，本章节的结论对于性能的保障至关重要，特别是针对列表子元素顺序会变化的情况。

Vue 中的 key 主要是用来给每个列表项提供一个唯一的标识，以便在数据更新时能够更高效地更新 DOM。使用 key 的主要目的是为了提升列表渲染的性能。

为什么不推荐使用 index 作为 key 呢？因为当列表项的顺序发生变化时，使用 index 作为 key 会引发性能问题。

1. 当使用 index 作为 key 时，Vue 会尝试尽可能复用已有的 DOM 元素，但是当列表顺序改变时，它无法准确知道哪些元素需要被更新，哪些元素需要被删除。这会导致不必要的 DOM 操作，从而降低渲染性能。

2. 使用 index 作为 key，在列表顺序频繁变化的情况下，可能会导致整个列表的渲染性能下降，因为每次顺序变化都需要重新渲染整个列表。

3. 而使用唯一标识符作为 key，Vue 就能够准确知道哪些元素需要被添加、删除或更新，从而减少不必要的 DOM 操作，提高渲染性能。

总结：Vue 中的 key 用于提升列表渲染性能，不建议使用 index 作为 key，因为它在列表顺序变化时会导致性能问题。使用唯一标识符作为 key 可以有效避免这些问题，并提高应用的整体性能。

前言

Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。
另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换、或者子元素被删除的特殊情况，提前说明清楚，喷子绕道。