发现vue3 的 v-for 数组的一个小问题

正常情况

直接上代码

const a = reactive([1, 2, 3])
setTimeout(() => {
  a[1] = 3
  a[2] = 2
}, 2000)

很简单，定义一个响应性的数组，然后在模板里面循环。

<div v-for="(item, index) in a" :key="item">
  {{item}}
</div>

:key 使用 item 或者 index 都是可以相应的，这个很正常，但是直到使用 el-table 的 el-table-column。

意料之外的现象

我比较懒，不想一个一个的设置 <el-table-column>，于是做了个数组来v-for。
然后，当然是没有问题，实现了我想要的效果。

但是当我加上拖拽（修改th的前后顺序）的功能后却发现，不响应了。https://www.jianshu.com/p/6ee79eeb5bcc

<el-table-column
      v-for="(id, index) in colOrder"
      :colId="id"
      :column-key="id"
      :key="'grid_list_' + id"
      :fixed="id < fixedIndex"
      :prop="itemMeta[id].colName"
      :label="itemMeta[id].label"
      :width="itemMeta[id].width"
      :min-width="50"
      :align="itemMeta[id].align"
      :header-align="itemMeta[id]['header-align']"
      :filter-multiple="false"
      :show-overflow-tooltip="true"
      :formatter="myformatter"
    >
    </el-table-column>

注意看这里 :key="'grid_list_' + id" key的设置。
一开始设置为id，结果发现直接修改数组后，table 没有变化，也就是 th 的顺序没有改变。

这是几天前的事情了，今天又想起研究了一下，发现把 key 改成 :key="'grid_list_' + index"，居然就能响应了。

比较无语，以前听说 v-for 的时候，key 尽量不要用 index，所以我特意用的id，结果没想到会这样。

原理没想明白，大概是vue内部判断的问题，认为没有变化无需更新吧。