key不建议是index

 <ul>
        <li v-for='(item,index) in arr' :key="index">{{item}}</li>
    </ul>
    <button @click="btn">按钮</button>
<button @click="btn2">按钮2</button>

 data() {
    return {
        arr:['a','b','c','d']
    };
  },

    btn(){
         //索引为2 的地方删除一个
          this.arr.splice(2,1)
      },
   btn2(){
        //索引为2增加一个000
          this.arr.splice(2,0,'000')
      }

一：

a的索引为0

b的索引为1

c的索引为2

d的索引为3

二，点击按钮

点击按钮后，d的值变了，a，b的值不变。原因为d的索引发生了变化

a的索引0,b的索引1，d的索引3.

key绑定的是index索引值，索引变化，key也会改变。所以d也会新建

?三.修改key

 <ul>
      <li v-for="item in arr" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="btn">按钮</button>
    <button @click="btn2">按钮2</button>
 arr:[
            {
                id:'0',
                name:'a'
            },
            {
                id:'1',
                name:'b'
            },
            {
                id:'2',
                name:'c'
            },
            {
                id:'3',
                name:'d'
            }
        ]

?有唯一的key值，不会再新建。