一、key 属性的核心作用
在 Vue 中，key是一个特殊的属性，主要用于协助 Vue 的虚拟 DOM（Virtual DOM）算法高效地更新实际 DOM。它的核心作用可以概括为：
- 唯一标识节点：为每个节点提供一个唯一的身份标识
- 优化 Diff 算法：帮助 Vue 准确判断两个节点是否为同一节点(如for循环遍历绑定key)
- 维持状态：在节点更新时保留组件状态
二、虚拟 DOM 与 Diff 算法的工作原理
要理解 key 的作用，必须先了解 Vue 的虚拟 DOM 和 Diff 算法机制：
-
虚拟 DOM 的本质
虚拟 DOM 是真实 DOM 的 JavaScript 对象映射，当数据变化时，Vue 会先更新虚拟 DOM，再通过 Diff 算法计算出最小更新量，最后更新真实 DOM。 -
Diff 算法的核心策略
Vue 的 Diff 算法采用 "同层比较" 策略，遵循以下规则：- 只对比同一层级的节点
- 先检查节点类型，再检查 key 值
- 当节点类型或 key 不同时，认为是不同节点
-
节点类型与 key 的判断逻辑
// 简化的节点对比
)
