key的作用
key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。
1. 更准确
众所周知,vue的列表渲染是存在dom就地复用
原则的,带key就不是就地复用
了,在sameVnode中a.key === b.key 可以避免就地就地复用
的情况,所以会更加准确
2. 更快
利用key的唯一性生成map对象来获取对应节点,比遍历方式更快。
vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点。
vue的diff函数在交叉对比中,当新节点跟旧节点头尾交叉对比
没有结果时
- 会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(map查找)。如果没找到就认为是一个新增节点。
- 如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。
一种一个map映射,另一种是遍历查找。相比而言。map映射的速度更快。(出于这个观点,可以说带key更快)
附:
如果只说key能提高diff效率其实是不准确的。
见vue/patch.js,在不带key的情况下,判断sameVnode时因为a.key和b.key都是undefined,对于列表渲染来说已经可以判断为相同节点然后调用patchVnode了,实际根本不会进入到else代码,也就不能说“带key比不带key时diff算法更高效”了。
然后,官网推荐推荐的使用key,应该理解为“使用唯一id作为key”。因为index作为key,和不带key的效果是一样的。index作为key时,每个列表项的index在变更前后也是一样的,都是直接判断为sameVnode然后复用。
所以key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。
正是因为带唯一key时每次更新都不能找到可复用的节点,不但要销毁和创建vnode,在DOM里添加移除节点对性能的影响更大。所以会才说“不带key可能性能更好”。看下面这个实验,渲染10w列表项,带唯一key与不带key的时间对比:
不使用key的情况:
<li v-for="item in list">{{ item.text }}</li>
使用id作为key的情况:
<li v-for="item in list" :key="item.id">{{ n.text }}</li>
list构造:
const list1 = []
const list2 = []
for (let i = 0; i <= 100000; i++) {
list1.push({
id: i,
text: i
})
list2.push({
id: i * 2,
name: 100000 - i
})
}
因为不带key时节点能够复用,省去了销毁/创建组件的开销,同时只需要修改DOM文本内容而不是移除/添加节点,这就是文档中所说的刻意依赖默认行为以获取性能上的提升。
既然如此,为什么还要建议带key呢?因为这种模式只适用于渲染简单的无状态组件。对于大多数场景来说,列表组件都有自己的状态。
带上唯一key虽然会增加开销,但是对于用户来说基本感受不到差距,而且能保证组件状态正确,这应该就是为什么推荐使用唯一id作为key的原因。至于具体怎么使用,就要根据实际情况来选择了。