-
key的作用-
在
v - for指令中，key是一个特殊的属性。它主要用于帮助 Vue 识别列表中的每个节点，以便在数据发生变化时（如重新排序、添加或删除元素），Vue 能够更高效、准确地更新 DOM（文档对象模型）。 -
例如，当你有一个简单的列表展示组件，如展示用户列表：
-
<ul>
<li v - for="user in users" :key="user.id">{{user.name}}</li>
</ul>
这里的user.id就是key，假设users数组是一个包含用户对象的数组，每个用户对象有id和name属性。当users数组的顺序发生变化或者元素被添加、删除时，Vue 会根据key来确定如何最小化 DOM 操作。
2. key的必要性
-
如果没有
key，Vue 会使用一种 “就地复用” 的策略来更新 DOM。这可能会导致一些意外的结果。 -
例如，假设你有一个列表，初始数据为
['a', 'b', 'c']，对应的 DOM 节点为<li>a</li>、<li>b</li>、<li>c</li>。如果将数据更新为['b', 'c', 'd']，没有key时，Vue 可能会错误地复用第一个<li>节点，只是更新其内容为b，而不是按照预期删除原来的a对应的节点，添加d对应的新节点。
-
key的值的选择- 使用唯一标识符作为
key：理想情况下，key应该是每个列表项的唯一标识符，比如数据库中的主键。在上面的用户列表例子中，user.id是一个很好的选择。因为它在整个用户集合中是唯一的，能够准确地跟踪每个用户对应的 DOM 节点。 - 避免使用索引作为
key（大部分情况） ：虽然 Vue 允许使用数组的索引作为key，但这在某些情况下会导致性能问题和错误的 DOM 更新。例如，当你在列表头部插入一个新元素时，所有元素的索引都会发生变化。这会让 Vue 认为所有的元素都发生了变化，从而重新渲染所有的 DOM 节点，而不是只更新添加的新节点和移动相关节点的位置。 - 不过，在一些简单的、静态的列表（不会发生添加、删除、重新排序等操作）中，使用索引作为
key可能是可以接受的，但这种情况比较少见。
- 使用唯一标识符作为
-
key对组件的影响-
当
v - for用于循环渲染组件时，key就更加重要了。假设你有一个自定义组件UserCard，并且在父组件中这样使用：
-
<div v - for="user in users" :key="user.id">
<UserCard :user="user"></UserCard>
</div>
- 当
users数组发生变化时，Vue 会根据key来判断是重新创建组件实例、更新现有组件实例，还是销毁组件实例。如果key不变，组件会被复用，只更新其属性（通过props传递的数据）；如果key发生变化，原来的组件实例会被销毁，新的组件实例会被创建。这对于组件的生命周期钩子（如created、mounted等）的触发和内部状态的管理都有重要的影响。
除了使用数组元素的唯一属性作为key，还可以使用其他值吗？
如何选择合适的key值？
不使用key会带来哪些性能问题？
