Vue中key在列表渲染中具体扮演何种关键角色？

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

Vue2 使用 diff 算法对比新旧 vnode，从而更新 DOM 节点。通常在使用 v-for 指令时，Vue 会要求为循环列表的每一项添加唯一的 key，这样在渲染列表时才能更高效地定位和更新元素。那么这个 key 的作用到底是什么呢？

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

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

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