key是dom节点的唯一标识,与内容相关联
vue
和react
的虚拟DOM
的Diff
算法大致相同,其核心是基于两个简单的假设
首先讲一下diff
算法的处理方法,对操作前后的dom
树同一层的节点进行对比,一层一层对比,如下图:
当某一层有很多相同的节点时,也就是列表节点时,Diff
算法的更新过程默认情况下也是遵循以上原则。
比如一下这个情况:我们要在A、B、C、D、E
列表中B
后面插入F
当key=index
时,前后dom
树是这样子的:
把C
更新成F,D
更新成C,E
更新成D
,最后再插入E
,是不是很没有效率?
所以我们需要使用key
来给每个节点做一个唯一标识,Diff
算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
key=index
和key=id
对比:vue
中列表循环需加:key="唯一标识"
唯一标识可以是item
里面id index
等,因为vue
组件高度复用增加Key
可以标识组件的唯一性,为了更好地区别各个组件 key
的作用主要是为了高效的更新虚拟DOM
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。