上节课我们学习了v-for列表循环，其实我们在使用v-for循环的时候还需要为每一个列表项设置一个key值，这样做有助于提高我们的渲染性能，这个key值，还需要保证它的唯一性。很多人会把这个key设置成index 数组索引，其时这种做法是很不妥当的。如果我们的数组是写死不会发生变动的话，使用index也无所谓。

但是如果我们的数组内容不是固定的，会做一些增删改查的操作，这样就会导致了我们数组索引值发生了变化。key值也相对会发生变化， 数据量大的话可能会造成不必要的性能问题。

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。

简单理解：渲染了一个列表，然后改了列表里面的数据，vue它会根据key值一对一比较数据是发生了改变，如果发生了改变，就重新渲染一个列表项（dom）。如果没有发生改变，就使用现有的列表项（dom）只是把现有的列表项排个序而已。

它的判断就是依靠key值来做一对一比较的。当key值对不上的时候，他就会认为数据被修改掉了，需要重新渲染对应的列表项，所以如果key值不固定经常发生改变的话，vue就无法对比出那些新数据和老数据不一致，vue就会默认它被修改了然后给它重新渲染一遍，所以这个时候就会触发一些不必要的渲染操作。

尾部添加

修改之前                                 修改之后

在尾部添加了一条数据，因为其他数据的key值没有发生变化，所以它们不会重新渲染，只会渲染最新添加的这一条，这很符合逻辑。但是假设我们在数组的中间位置或者头部添加数据呢。

中间插入

修改之前                                    修改之后

我们插入了一条数据，却改变了3条数据的key值，vue会渲染3次条数据，这样就出大事情了，当我们数据量大的时候，就因为插入一条数据或者删除一条数据，就会导致后面大量的数据被重新渲染，性能就此拉胯了。

解决方法

在平时后端给我提供的数据中有一个id，这个id它就是一个固定值，我们推荐大家把key属性设置成这个id。这样也能避免我们上面发生性能问题。比如下面例子：

personList:[
          {
            id:1,
            name:"吴某",
            age:18,
            work:"老师"
          },
          {
            id:2,
            name:"罗某",
            age:20,
            work:"老师"
          },
          {
            id:3,
            name:"王某",
            age:22,
            work:"老师"
          }
        ]

html部分

<ul>
   <li v-for="(item,index) in personList" :key="item.id">{{index}}、{{item.name}}-{{key}}:{{item.id}}</li>   
</ul>