# key值的作用

记得以前刚开始学vue的时候不一定要加key，只是作为info来提示。现在越来越强调开发者需要加key，同时现在不加还会报错了。

更新时间：2019-01-23

我是导航条：介绍 -> 使用index作为key值 -> 使用数组中不会变化的那一项作为key -> 原理 -> key的作用 -> 其他 -> 参考链接

# 介绍

如果有一个列表已渲染了，还要往里面插入东西，那么v-for就会默认采用就地复用策略。也就是说，他会根据key值所对应的内容，来判断这个值是否修改。

如果修改，则重新渲染这一项
如果没修改，就复用之前的元素

# 不加key会有什么提示？

alt

同时会直接报错

# 使用index作为key值

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

这里是直接将 index 作为 key，如果对列表没有进行大改动，则没有多大影响。

# 在最后一条数据后插入

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
    {
        id: 4,
        name: '我是在最后插入的新数据',
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

此时还是将 index 作为 key，没有大问题。因为key值对应的内容没有改动

# 在中间插入一条数据

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是在中间插入的新数据',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这样就有问题了，比如：key为2、3、4对应的内容（即name）改动了，它们都要重新渲染

before	after
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

发现除了第一个数据可以复用以外，另外3条数据都系要 重新渲染

# 使用数组中不会变化的那一项作为key

<div v-for="(item, index) in list" :key="item.id" >{{item.name}}</div>

before	after
key: 1, index: 0, id: 1, name: test1	key: 1, index: 0, id: 1, name: test1
key: 2, index: 1, id: 2, name: test2	key: 4, index: 1, id: 4, name: 我是在中间插入的新数据
key: 3, index: 2, id: 3, name: test3	key: 2, index: 2, id: 2, name: test2
	key: 3, index: 3, id: 3, name: test3