Vue: v-for的键值key

最新推荐文章于 2025-02-24 15:41:08 发布

明年今日7

最新推荐文章于 2025-02-24 15:41:08 发布

阅读量4.2w

点赞数 80

分类专栏： qianduan 文章标签： vue

qianduan 专栏收录该内容

1 篇文章

订阅专栏

v-for中的key

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

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

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

总结一下，就是通过key值来提升渲染的效率。

举个?

const list = [
    {
        id:1,
        name:'test'
    },
    {
        id:2,
        name:'test2',
    },
    {
        id:3,
        name:'test3'
    },
]

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

这个场景在我们开发的时候经常会碰到，因为不加key，vue现在会直接报错，所以我使用index作为key；
下面再举两个例子来看数据更新后的情况。

1.在最后一条数据后再加一条数据

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
    {
        id: 4,
        name: '我是在最后添加的一条数据',
    },
]

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

2.在中间插入一条数据

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是插队的一条数据',
    }
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]

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

之前的数据                         之后的数据

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插队的一条数据
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                 key: 3  index: 3 name: test3

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

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

之前的数据                         之后的数据

key: 1  id: 1 index: 0 name: test1     key: 1  id: 1 index: 0  name: test1
key: 2  id: 2 index: 1 name: test2     key: 4  id: 4 index: 1  name: 我是插队的那条数据
key: 3  id: 3 index: 2 name: test3     key: 2  id: 2 index: 2  name: test2
                                       key: 3  id: 3 index: 3  name: test3

对比可以发现，只有一条数据发生了变化，因为其他数据的id都没变，所以key值也没变，所以只需要渲染这一条新的数据即可
所以一般推荐使用id作为key值来配合v-for使用

下面大致从虚拟DOM的Diff算法实现的角度去解释一下：

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：