我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
加key主要不是为了性能,主要是为了区分两个 vnode 节点。比如一个列表,增加其中一项,如果不加 key 区分,增加后新旧 vnode 对比就会出现 bug。因为列表元素 DOM 结构相同,vue 会把原本不相同的 vnode 认为是 sameVnode,导致 bug。
说到底,key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。在渲染简单的无状态组件时,如果不添加key组件默认都是就地复用,不会删除添加节点,只是改变列表项中的文本值,要知道节点操作是十分耗费性能的。而添加了key之后,当对比内容不一致时,就会认为是两个节点,会先删除掉旧节点,然后添加新节点。