在官方文档中是这样解释的:key的特殊属性主要用在vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不能使用key,Vue会使用一种最大 限度减少动态元素并且尽可能的尝试就地修改或修复相同类型元素的算法。而且使用key时,它会基于key的变化重新排列元素顺序,并且会移出或销毁key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。最常见的是结合v-for。它也可以用于强制替换元素或组件而不是重复使用它。当遇到(1)完整的触发组件的生命周期钩子(2)触发过度。场景时,key可能会很有用
总结:我们要利用key属性的优点,必须保证同一父元素的所有子元素有不同的key属性。在有了key属性之后,Vue会记住元素们的顺序,并根据这个顺序在适当的位置插入/删除元素来完成更新,这种方法比没有key属性时的就地复用策略效率更高。然后就是在过渡中使用key,当有相同标签名的元素切换时,需要通过key特性设置唯一值来标记,让Vue区分它们,否则Vue会为了性能只会替换相同标签内部的内容。
Diff算法三个对比:
(1)同层级对比
(2)同key值对比
(3)同组件对比