diff 算法在我的另一篇有解释,这个是之前整理的面试题,环环相扣,关于react的基础:看了前三个就能基本理解diff啦~ 此篇我们只讨论key在列表组件中的作用!
一、引子
有人认为基于没有key的情况diff速度会更快。确实,这种观点并没有错,没有绑定key的情况下,并且在遍历模板简单的情况下,会导致虚拟新旧节点对比更快,节点也会复用。而这种复用是就地复用,一种鸭子辩型的复用。
<div id="app">
<div v-for="i in dataList">{{ i }}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
dataList: [1, 2, 3, 4, 5]
}
})
//以上代码,v-for的内容会生成以下的dom节点数组,我们给每一个节点标记一个身份id:
[
'<div>1</div>', // id:A
'<div>2</div>', // id:B
'<div>3</div>', // id:C
'<div>4</div>', // id:D
'<div>5</div>' // id:E
]
下面我们尝试改变dataList数据,进行数据位置替换,对比改变前后的数据。
vm.dataList = [4, 1, 3, 5, 2] //数据位置替换
// 没有key的情况, 节点位置不变,但是节点innerText内容更新了
[
'<div>4</div>', // id:A
'<div>1</div>', // id: B
'<div>3</div>', // id: C
'<div>5</div>', // id: D
'<div>2</div>' // id: E
]
// 有key的情况,dom节点位置进行了交换,但是内容没有更新
// <div v-for="i in dataList" :key='i'>{{ i }}</div>
[
'<div>4</div>', // id: D
'<div>1</div>', // id: A
'<div>3</div>', // id: C
'<div>5</div>', // id: E
'<div>2</div>' // id: B
]
下面我们增删dataList列表项,对比改变前后的数据。
vm.dataList = [3, 4, 5, 6, 7] // 数据进行增删
// 1. 没有key的情况, 节点位置不变,内容更新了
[
'<div>3</div>', // id: A
'<div>4</div>', // id: B
'<div>5</div>', // id: C
'<div>6</div>', // id: D
'<div>7</div>' // id: E
]
// 2. 有key的情况, 节点删除了 A, B 节点,新增了 F, G 节点
// <div v-for="i in dataList" :key='i'>{{ i }}</div>
[
'<div>3</div>', // id: C
'<div>4</div>', // id: D
'<div>5</div>', // id: E
'<div>6</div>', // id: F
'<div>7</div>' // id: G
]
从以上来看,不带有key,并且使用简单的模板,基于这个前提下,可以更有效的复用节点,从diff速度来看也是不带key更加快速的,因为带key在增删节点上有耗时。这就是vue文档所说的默认模式,但是这个并不是key作用,而是没有key的情况下可以对节点就地复用,提高性能。
这种模式会带来一些隐藏的副作用,比如可能不会产生过渡效果,或者在某些节点有绑定数据(表单)状态,会出现状态错位。VUE文档也说明了 这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
总结:在不带key的情况下,对于简单列表页渲染来说diff节点更快是没有错误的,但是这并不是key的作用。
二、那么key的作用是什么?
在vue的diff函数中,在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => index 的map映射),如果没找到就认为是一个新增节点。
而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言,map映射的速度更快。key是给每一个Vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的Vnode节点。
2.1 Vue官方文档是这么讲的
2.2 react官方文档是这么说的
我的总结在另一篇博客,截图过来一段
总结,vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点,key在diff算法中起着不可比拟的作用。说到底,key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。
最后,举一个稍微实际点的例子,你细品一下:
一个新闻列表,可点击列表项来将其标记为"已访问",可通过tab切换“娱乐新闻”或是“社会新闻”。
不带key属性的情况下,在“娱乐新闻”下选中第二项然后切换到“社会新闻”,"社会新闻"里的第二项也会是被选中的状态,因为这里复用了组件,保留了之前的状态。要解决这个问题,可以为列表项带上新闻id作为唯一key,那么每次渲染列表时都会完全替换所有组件,使其拥有正确状态。
这只是个简单的例子,实际应用会更复杂。带上唯一key虽然会增加开销,但是对于用户来说基本感受不到差距,而且能保证组件状态正确,这应该就是为什么推荐使用唯一id作为key的原因。至于具体怎么使用,就要根据实际情况来选择了。