vue报错之(Do not use v-for index as key on <transition-group> children)

在做项目时遇到碰到此问题，截取部分代码记录如下：

transition-group.transition-group(type="animation" tag="div")
            .template(
                v-for="(tax, index) in form.taxList"
                :key="index"
                )

查阅相关资料得知：

transition-group的子元素上不应使用索引index作为key的值，否则相当于没有使用key,通过官方文档可知：
当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，
并且确保它在特定索引下显示已被渲染过的每个元素。
"就地复用"的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

举例说明：

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

  {

    id: 1,

    name: "Person1"

  },

  {

    id: 2,

    name: "Person2"

  },

  {

    id: 3,

    name: "Person3"

  },

  {

    id:4,

    name:"Person4"

  }

];

　　若中间删除一个list项

删除前：

key	id	index	name
0	1	0	Person1
1	2	1	Person2
2	3	2	Person3
3	4	3	Person4

 

删除Person2后：

 

key	id	index	name
0	1	0	Person1
1	3	1	Person3
2	4	2	Person4

两表格对比可知：原index为1的name为Person2，删除后，index为1的name变为Person3,这就产生bug了，但如果使用唯一id作为key，删除 Person2 后，剩下的元素因为与 key 的关系没有发生变化，
都不会被重新渲染，从而达到提升性能的目的。此时，list 的 item 作为 select 的选项，也不会出现上面所描述的bug。