前言
在做VUE项目时我们在循环渲染结构的时候通常会写
:key="index",那大家有没有想过为什么这么做，这么做的目的是什么
其实写:key="index"有好处也有弊端，就看个人怎么看待，怎么用，更适合自己现在的项目场景
好处及坏处：
没有key的情况diff速度会更快。没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。
VUE文档也说明了 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出
在我的理解key的作用是什么那？
key是你当前断然结构的唯一下标，为什么说是唯一下标那
v-for的内容会生成以下的dom节点数组，我们给每一个节点标记一个身份id：
<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]
}
})
[
'<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数据，进行数据位置替换，对比改变后的数据
[
'<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
]
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的作用
key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。
1. 更准确
因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。
2. 更快
利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。map会比遍历更快
个人推荐
加上key
其一：在我们写项目的时候，没有 key会引起Eslint语法检测报错
其二：写不写key在性能上来说，并不能体现出一定能够优化性能，因为我们还需要做一些别的操作，比如：操作vnode节点，这些都会影响到加载性能，但是你写上key 可以减少该法过程中不必要的麻烦，与其对比加载性能耗时来说（其实没有key也没有快到哪去）；更建议写上key
