跳到主要内容

key

2023年05月08日
柏拉文
越努力，越幸运

一、认识​

key 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。

在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。

二、语法​

2.1 列表渲染​

同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

2.2 强制重新渲染​

key 同样可以用于强制替换一个元素/组件而不是复用它, 这样的话可以在适当的时候触发组件的生命周期钩子,还可以触发过渡。

<div :key="a">
    {{ a }}
</div>

三、问题​

3.1 Vue 中列表渲染为什么要加 key ? key 有什么作用?​

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示