前端table或li设置key值问题

一、问题描述

给table或li设置key值时，我们一般使用后台数据的id值，而不是使用列表的下标值

二、原因

后台数据id和列表下标都是唯一不重复的，但列表下标值在列表进行删除操作时，就会有问题(前端的diff算法)。比如，现在有列表数据：

[
    {
        "index": 0,
        "name": "A"
    },
    {
        "index": 1,
        "name": "B"
    },
    {
        "index": 2,
        "name": "C"
    }
]

当删除元素B时，数据变成了：

[
    {
        "index": 0,
        "name": "A"
    },
    {
        "index": 1,
        "name": "C"
    }
]

删除前后，下标index=1的是两个值，diff算法对比会有问题，但使用id值则不会出现问题。

三、总结

• 使用id，列表删除前后，id对应的数据都是唯一的
• 使用下标，列表删除前后，下标对应的数据是不唯一的。