Vue列表渲染中key的作用究竟有多关键？

本文共计1737个文字，预计阅读时间需要7分钟。

Vue2利用diff算法对比新旧vnode，从而更新DOM节点。当我们使用v-for指令时，Vue会要求为循环列表的每一项添加唯一的key，这样才能在渲染列表时更高效地找到对应项，减少不必要的DOM操作。那么，这个key到底起到了什么作用呢？

Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？

在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。

Vue2更新真实DOM的操作主要是两种：创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点，这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点，所以在diff中逻辑都是为了减少新的创建而更多的去复用已有DOM节点来完成DOM的更新。