添加 :key 属性可以让vue识别DOM哪个是哪个
上图中,列表DOM每一项有复选框,勾选状态代表了DOM自身在列表中的位置。
现更新列表数据,以查看勾选项是否可以正确渲染。
先勾选第三项,再删除第三项。正确的DOM渲染应该是只留下了1 2 4项,且每一项都未勾选。
实际结果:
实际结果显示,如果没有正确的key属性(下方所示),勾选的项目会被认为是列表第三项,移除第三项后,第四项变成了第三项,所以导致错误地渲染了第四项的勾选状态。
同样,如果在列表前追加项目,也会导致同样的DOM渲染错误:
它仍然会认为第三项被勾选了。所以不管这个列表如何变化,都是固定的第三项保持勾选状态,这是不符合正常DOM结构的。