Vue系列之v-for中key的作用

---

我们现在在使用 v-for 的时候，都必须会加上一个 key 值，并且很多人会使用 index 来作为 key，其实这样是不太正确的一种做法。那么 v-for 中的键值 key 到底有什么作用呢。

首先看一看 Vue 文档里的说法：

在用 v-for 更新已渲染的元素列表的时候，会使用就地复用的策略；这就是说列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素。

总之，v-for 通过 key 值来提升渲染效率的。

1、示例

      list: [
        {
          id: 1,
          name: '张三'
        },
        {
          id: 2,
          name: '李四'
        },
        {
          id: 3,
          name: '王五'
        }
      ]

    <ul>
      <li v-for="(item, index) in list" v-bind:key="index">{{ item.name }}</li>
    </ul>

这个场景在我们开发的时候经常会碰到，因为不加 key，vue 现在会直接报错，所以我使用 index 作为 key.

下面再举两个例子来看数据更新后的情况：

1.1、在最后一条数据后再加一条数据

      list: [
        {
          id: 1,
          name: '张三'
        },
        {
          id: 2,
          name: '李四'
        },
        {
          id: 3,
          name: '王五'
        },
        {
          id: 4,
          name: '在最后添加的一条数据'
        }
      ]

此时前三条数据直接复用之前的，新渲染最后一条数据，此时用 index 作为 key，没有任何问题。

1.2、在中间插入一条数据

      list: [
        {
          id: 1,
          name: '张三'
        },
        {
          id: 4,
          name: '在中间添加的一条数据'
        },
        {
          id: 2,
          name: '李四'
        },
        {
          id: 3,
          name: '王五'
        }
      ]

此时更新渲染数据，通过 index 定义的 key 去进行前后数据的对比，发现

之前的数据						之后的数据
								
key: 0 index: 0 name: 张三		key: 0 index: 0 name: 张三
key：1 index: 1 name: 李四		key：1 index: 1 name: 在中间添加的一条数据
key：2 index: 2 name：王五		key：2 index: 2 name：李四
								key：3 index: 3 name：王五

可以发现除了第一条数据可以复用以外，另外三台哦数据都需要重新渲染，因为 key 值发生了变化；
这时候就可以体现了一个效率问题，只插入了一条数据，却要重新渲染三条数据；

所以我们需要可以想办法让数组中不会变化的数据的 key 值也不变，所以不能通过 index 来设置 key 值，应该设置一个唯一的 id 来标识数据的唯一性；我们修改之后再来对比一下渲染的效率：

之前的数据								之后的数据
								
key: 1 id: 1 index: 0 name: 张三		key: 0 id: 1 index: 0 name: 张三
key：2 id: 2 index: 1 name: 李四		key：4 id: 4 index: 1 name: 在中间添加的一条数据
key：3 id: 3 index: 2 name：王五		key：2 id: 2 index: 2 name：李四
									key：3 id: 3 index: 3 name：王五

对比可以发现，只有一条数据发生了变化，因为其他数据的 id 都没变，所以 key 值也没变，所以只需要渲染这一条新的数据即可

所以一般推荐使用 id 作为 key 值来配合 v-for 使用。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！