key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法。
举个index作为key的例子：
1 const list = [
2 {
3 id: 1,
4 name: 'test1',
5 },
6 {
7 id: 2,
8 name: 'test2',
9 },
10 {
11 id: 3,
12 name: 'test3',
13 },
14 ]
1 <div v-for="(item, index) in list" :key="index" >{{item.name}}</div>
下面我们来看一看用index作为key的缺陷
1.在最后一条数据后再加一条数据
1 const list = [
2 {
3 id: 1,
4 name: 'test1',
5 },
6 {
7 id: 2,
8 name: 'test2',
9 },
10 {
11 id: 3,
12 name: 'test3',
13 },
14 {
15 id: 4,
16 name: '我是在最后添加的一条数据',
17 },
18 ]
运行结果：
之前的数据 之后的数据
key: 0 index: 0 name: test1 key: 0 index: 0 name: test1
key: 1 index: 1 name: test2 key: 1 index: 1 name: 我是插队的那条数据
key: 2 index: 2 name: test3 key: 2 index: 2 name: test2
key: 3 index: 3 name: test3
2.在中间插入一条数据
1 const list = [
2 {
3 id: 1,
4 name: 'test1',
5 },
6 {
7 id: 4,
8 name: '我是插队的那条数据',
9 }
10 {
11 id: 2,
12 name: 'test2',
13 },
14 {
15 id: 3,
16 name: 'test3',
17 },
18 ]
运行结果：
之前的数据 之后的数据
key: 1 id: 1 index: 0 name: test1 key: 1 id: 1 index: 0 name: test1
key: 2 id: 2 index: 1 name: test2 key: 4 id: 4 index: 1 name: 我是插队的那条数据
key: 3 id: 3 index: 2 name: test3 key: 2 id: 2 index: 2 name: test2
key: 3 id: 3 index: 3 name: test3
通过上面清晰的对比,发现用index作为key的方式除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染。然而用每条数据的id作为key来标识数据的唯一性这种方式，只有新添加的数据需要渲染，其他的数据复用之前的数据。显然后一种方式更加的高效。
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
至于其中的原因是因为Virtual DOM 使用Diff算法实现的，详解请参考官方文档或参考https://www.jianshu.com/p/342e2d587e69博客