我们在使用VUE框架时都会用到v-for

• 我们可以使用v-for更新已渲染的元素列表时,默认用就地复用策略;
• 列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;
• 我们在使用的使用经常会使用数组的下标index来作为key,但其实这是不推荐的一种使用方法;

使用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去进行前后数据的对比,发现

image.png

除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染。

最好的办法是使用数组中不会变化的那一项作为key值,对应到项目中,即每条数据都有一个唯一的id,来标识这条数据的唯一性;使用id作为key值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染

image.png

对比发现只有一条数据变化了,就是id为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的;

为什么使用v-for时必须添加唯一的key?