【Vue】v-for中的key

一、引入问题

语法： key属性 = "唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

以小黑的书架案例为例，如果点击了第一个元素的删除按钮，我们就会认为第一本书就会从页面中移除

但是大家脑海中的效果是加了key的效果。

如下图，点击第一个带有背景色的li，删除后第一个li还在。由此可见这个li压根没动，动的是里面的文字内容。

---

二、分析问题

当我们加了key，可以理解为给列表的每个li都加了一个唯一标识，当我点击删除的时候确实数据中把这一项删了，但是由于我给每个key都加了一个唯一标识，所以当我发现数据中剩下这三项，此时它就可以非常精准的定位到页面中剩下的其实是下面这三个li是我需要的，而第一个li实际上不存在了。

如果没加key，官网有这么一句话：v-for的默认行为会尝试原地修改元素（就地复用）

如果不加key，就相当于把最后一个删除了，而其他的都是原地修改标签里的值。

实例代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

1. key 的值只能是字符串 或 数字类型
2. key 的值必须具有唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）