Key在什么情况会提高渲染速度，什么情况不行？

Key在什么情况会提高渲染速度，什么情况不行？

简单情况

结论： 在没有绑定key和模板简单的情况下，不使用Key反而会更快。

举🌰:

<div v-for="item in [1,2,3,4,5]">{{ item }}</div>

以上代码会生成如下dom节点

<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

这时我们把顺序换一下，我们把数组换成倒叙，那么有key和没有key有什么区别？会怎么处理？

<div v-for="item in [5,4,3,2,1]">{{ item }}</div>

// 没有Key的情况,节点类型不变，位置不变，内容更新了
<div>5</div> //ID:A 
<div>4</div> //ID:B
<div>3</div> //ID:C
<div>2</div> //ID:D
<div>1</div> //ID:E
// 按照这样子的更新显示循环一遍,时间复杂度为O(n)
// 有Key的情况,dom节点位置发生了调换，显示要进行逐个对比,时间复杂度为O(n2)
<div>5</div> //ID:E 
<div>4</div> //ID:D
<div>3</div> //ID:C
<div>2</div> //ID:B
<div>1</div> //ID:A

这里简单说明一下其实简单模板下diff速度更快的说法其实是源于就地复用模式下面形成的。

最终结果:实际的应用中其实不怎么可能存在较为简单的模板，即使存在对于简单模板这样的比较损耗来说，可以忽略不计，所以Key几乎是百利而无一害