Vue - 你知道Vue中key的工作原理吗

难度级别：中级及以上                                 提问概率：80% 

---

在Vue项目开发中，并不推荐使用索引做为key，以为key必须是唯一的，可以使用服务端下发的唯一ID值，也不推荐使用随机值做为key，因为如果每次渲染都监听到不一样的key，那么节点将无法复用，这与Vue节省性能的初衷是违背的。当Vue更新DOM时，它可以利用唯一的key来进行新旧节点的比较，基于这一特点，Vue在进行diff算法的时候，可以更加高效快捷的决定某些节点需要做移动、新增或是删除的操作，从而大大提升从虚拟DOM到真实DOM的更新效率。

那么Vue中key的工作原理是什么样的呢？首先虚拟DOM是一个大的数据对象，对象节点数据便是真实DOM的模拟实现，在真正更新DOM之前，需要对新旧虚拟节点进行比较；然后便会利用key值来比较两个新旧节点，Vue认为如果key相同，那么新旧节点就是同一个，不需要做出额外操作，从而达到复用节点的效果；而如果key值不同，那么Vue就需要进行移动、新增或是删除的操作。

---

刷题思考

    key在Vue源码中的实现原理其实并不简单，在现实面试场景中，却很少有面试官会突然奇想，希望求职者在纸上当场写一段源码。再加上疫情过后很多面试会选择线上进行，这就要求开发人员尽量去读源码，并且能够以口头表达的形式，非常清晰的描述出其实现原理。

    很多人可能会想，既然这样，那我直接背这些描述不就行了，何必去读源码呢？了解一个技术的实现最好的办法就是去读它的源码，这样可以让我们在业务开发中更加熟知其实现特性，减少未知问题的产生，久而久之也会使自己的技术有所精进。不过最直接的好处就是，万一面试官突然问起某一处实现细节的时候，至少自己可以对答如流。

---

类似考点

    既然key要求稳定且唯一，而且它是用来做比较用的，那么面试官对于key的使用，很可能还会问以下这些问题，例如请你说一说列表渲染中，为什么不建议使用索引做为key？例如开发Vue组件的时候，不小心key出现重复值了，会抛出什么错误？