vue中key的作用

作用：

1. key是给每一个Vnode的唯一的id，在执行diff算法的时候可以根据key，更准确的找到对应的Vnode节点，高效的更显虚拟dom。
2. 不使用key：Vue尽可能地高效地渲染元素，通常会 就地复用最小化的element的移动，并且会尝试尽最大程度在同适当的地方对同样类型的element，做patch或者reuse。
3. 使用key：Vue会根据keys的顺序记录element，曾经拥有key的element如果不再出现的话，会被直接remove或者destoryed。因此使用key可以提高渲染效率，同理，改变某一个key值会使该元素重新渲染。

原理：

1. 虚拟dom更新 diff算法执行的时候，在patch中的patchVnode下的updateChildren会处理新旧节点，这个时候会通过key精确判断两个节点是否是同一个。
2. 如果没有key的话，就会强硬的更新，就地复用原则，从而频繁的更新，性能会很差，加了key就会使整个patch过程更加高效，减少dom操作，提高性能。

说一说diff：

1. 核心方法patch：这个方法在vue进行update，即将render函数（虚拟dom生成的函数）转为真实dom的时候执行，里面主要首次渲染创建真实的dom树，进行虚拟dom节点直接的对比，以及真实dom更新的一系列操作
2. patchVnode：这个方法在patch中调用，是直接对比新旧Vnode节点，也是diff算法真正执行的地方。
3. 对Vnode进行patch的时候会调用sameVnode方法，里面会使用key是否相等来判断Vnode是否为同一个。并且在对比过程中作为组件复用的一个判断条件。
4. 所以key值是在dom树进行diff算法时候发挥作用。一个是用判断新旧Vnode是否为同一个，从而进行下一步的比较及渲染。另一个作用就是判断组件是否可以复用，是否需要重新渲染。