[笔记] Vue中key的作用

Vue官方文档解释

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

使用key的用处

• 完整地触发组件的生命周期钩子
• 触发过渡

key和效率

• 设置key之后数组的diff效率不一定会提高（在复杂的列表渲染中快速准确的找到与newVnode相对应的oldVnode，提升diff效率）
• 不使用key时，原地复用的效率是最高的（每一次循环新旧节点都是相对应的，只需要更新其内的文本内容就可以完成DOM更新）

参考

写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？