虚拟DOM为什么不能用下标做索引

今天发现用索引做下标的时候，删除第二个元素会出现bug，顿时觉得很神奇，因为我代码里都是这样写的，从来没出现过bug。

出现的原因：
如果是index做下标的话之前的索引是[1,2,3]；
删除2后按道理讲应该变成[1,3]；
但是实际上变成的是[1,2,undefined];
虚拟DOM diff的时候就会认为2没有变化，把3删除了。

那么为什么我正常开发的项目中没有出现这个问题呢？？
因为正常情况下前端删除不是自己本地玩泥巴，而是通过ajax请求后端接口删除，再获取新的数据重新赋值，不是因为没有bug，而是bug被隐藏起来了。还有就是如果展示item.text也是没有问题的。

参考地址

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <input placeholder="" value="vue" />
      <button @click="() => doDelete(index)">
        delete
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          text: "react",
        },
        {
          id: 2,
          text: "vue",
        },
        {
          id: 3,
          text: "dom",
        },
      ],
    };
  },
  methods: {
    doDelete(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>