v-for中加入key的作用

前言

v-for是在vue开发中日常使用的一个指令，在大多数编辑中，会提示警告需要加上相应的key。
那么key的作用是什么？为什么要加上key呢？

首先简单看看有key和没有key而言，DOM变化上有什么区别。

以下是[1,2,3,4,5]使用v-for后显示的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

更改数组顺序，并删除数组中的2 => [3,4,5,1]
没有使用key的情况下，节点不变，节点中的内容改变

<div>3</div> //id： A
<div>4</div> //id:  B
<div>5</div> //id:  C
<div>1</div> //id:  D

使用key的情况下，节点和节点内容不变，进行位置调整

<div>3</div> //id： C
<div>4</div> //id:  D
<div>5</div> //id:  E
<div>1</div> //id:  A

这时候可能有人会说，“噢。加不加key就是等于说，DOM节点和节点中的内容有没有绑定在一起。可以了可以了，我懂了，后面不用看了”。

来，请把这位同学抓去煲汤。

容我先说个大概的意思。

1.使用了key的情况下，key会作为diff算法计算中的一部分，用于提高运算效率。
2.在不使用key的情况下，vue会采用‘就地复用’的态度。

其中，diff算法是vue和react用来对比新旧虚拟节点的方法，‘就地复用’是在key值不存在时进行的更新策略。

先说说key在diff算法中的作用。

vue在对比新旧虚拟节点的过程中，vue需要获取到相应的旧节点，然后再进行新旧节点比较，如果没有获取到相应的旧节点，则判断为新诞生的节点。

而获取旧节点的过程中，如果新节点中包含key则采用哈希映射的方式查找相应的旧节点，否则，采用循环遍历的方式查找相应的旧节点。

有key就使用哈希映射，没key就用遍历。嗯，key的第一个作用就出来了，那就是使vue在查找相应旧节点时更快。

而key的另一个作用，就是避免‘就地复用’带来的一系列问题。

再说说‘就地复用’

那么‘就地复用’是怎么回事呢，就是就地复用嘛，不进行移动位置，而是直接更新节点。

‘就地复用’只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。它存在的一系列问题，百度一大堆，在此就不一一提出。

但，凡是都有好坏，不然早就被淘汰。

‘就地复用’也存在一个优点。综上所述，带有key值的时候，diff算法对于DOM的态度是，移动和相应的增删。这样的DOM操作，可以提高DOM的复用性，但是也存在着耗时问题。

比如：
对于简单的DOM，不加上key的话，vue会直接进行DOM更新，减少不必要的移动、增删的耗时。
对于复杂的DOM，加上key的话，DOM层才会被有效的利用，而不用重新去渲染。

技术存在优略点。而如何根据需求对技术做出选型，利用其相应的优点，取决于你。

总结

1.使用了key的情况下，key会作为diff算法计算中的一部分，用于提高运算效率。
2.在不使用key的情况下，vue会采用‘就地复用’的态度。
3.对于简单的DOM，不加上key的话，vue会直接进行DOM更新，减少不必要的移动、增删的耗时。
4.对于复杂的DOM，加上key的话，DOM层才会被有效的利用，而不用重新去渲染。

后记一下

对于diff算法的源码详解可以跳转至以下链接

<div v-if="作者有写相应链接">
	<a href="作者写的链接">点击跳转diff算法的源码</a>
</div>

跪求点评中。。。