demo代码如下：

    1. <template>
    2.   <div>
    3.     翻车现场，以下是数组
    4.     <button @click="reset">复原</button>
    5.     <button @click="deleteLast">删除最后一个元素</button>
    6.     <button @click="deleteSecond">删除第二个元素</button>
    7.     <ul>
    8.       <select>
    9.         <option v-for="(item, index) in targetArr" :key="index" value="">{{item.name}}</option>
    10.         <!-- <option v-for="item in targetArr" :key="item.id" value="">{{item.name}}</option> -->
    11.       </select>
    12.     </ul>
    13.   </div>
    14. </template>
    16. <script>
    17. export default {
    18.   data() {
    19.     return {
    20.       targetArr: [],
    21.       testData1: [
    22.         {
    23.           id: 1,
    24.           name: 'aaa',
    25.         },
    26.         {
    27.           id: 2,
    28.           name: 'bbb',
    29.         }, {
    30.           id: 3,
    31.           name: 'ccc',
    32.         }, {
    33.           id: 4,
    34.           name: 'ddd',
    35.         },
    36.       ],
    37.     };
    38.   },
    39.   created() {
    40.     this.targetArr = JSON.parse(JSON.stringify(this.testData1));
    41.   },
    42.   mounted() {
    43.   },
    44.   methods: {
    45.     reset() {
    46.       this.targetArr = JSON.parse(JSON.stringify(this.testData1));
    47.     },
    48.     deleteLast() {
    49.       this.targetArr.pop();
    50.     },
    51.     deleteSecond() {
    52.       this.targetArr.splice(1, 1);
    53.     },
    54.   },
    55. };
    56. </script>
    58. <style scoped lang="css">
    59. </style>

    bug复现步骤：

    • 1、选择选择框，选到第三项 ccc
    • 2、点击删除“第二个元素”
    • 3、这个时候发现：选择框自动选到了第四项 ddd

    使用index的缺点：

    • 通常来说，只是显示不会有什么问题。但是如果有删除之类的操作，则可能出现上述bug。
    • 果有删除之类的操作，会影响性能。因为删除列表中的一项后，数组各项的index都发生了改变，要重新渲染