Vue 中 key 的作用

类别：vue / 日期：2022-12-23 / 浏览：490 / 评论：0

vue 中 key 值的作用可以分为两种情况来考虑：

第一种情况是 v-if 中使用 key。由于 Vue 会尽可能高效地渲染元 素，通常会复用已有元素而不是从头开始渲染。因此当使用 v-if 来 实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个 元素就会被复用。如果是相同的 input 元素，那么切换前后用户的 输入不会被清除掉，这样是不符合需求的。因此可以通过使用 key 来 唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。 这个时候 key 的作用是用来标识一个独立的元素。

第二种情况是 v-for 中使用 key。用 v-for 更新已渲染过的元素列 表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改 变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此 处的每个元素。因此通过为每个列表项提供一个 key 值，来以便 Vue 跟踪元素的身份，从而高效的实现复用。这个时候 key 的作用是为 了高效的更新渲染虚拟 DOM。-Vue

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，diff 操作可 以更准确、更快速

更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。 更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历 方式更快-vue