Vue中使用v-for时，key属性遇到的问题与解决方案

在 Vue 项目中，使用 v-for 渲染一组图片时，发现搜索后页面应展示的图片错误地显示为初始化时的第一张图片。
起初通过修改 v-else 为 v-show=“item.imgInfoList.length > 0” 解决问题，但后发现将 v-for 的 key 从 index 更改为 item 中的唯一值也能解决问题。

原理解释

key 属性帮助 Vue 精确跟踪元素更新，绑定唯一值能确保数据变化时正确渲染对应的元素，而非错误地复用旧的 DOM 元素。

为什么更改 key 绑定可以解决问题？

将 key 从 index 改为 item 中的唯一值时，Vue 可以准确地识别每个元素的唯一性，从而在数据发生变化时正确地更新 DOM。这意味着：
避免复用错误: Vue 不会错误地复用之前渲染的 DOM 元素，确保每个元素在数据变化时都能正确地重新渲染。
准确更新: 当数据更新时，Vue 能够准确找到需要更新的 DOM 元素，并应用最新的数据。

为什么 v-show 的改动也能解决问题？

虽然使用 v-show 可以暂时解决部分问题，因为它仅隐藏元素而不从 DOM 中移除元素，但它并不是一个理想的解决方案。这是因为：
元素仍在 DOM 中: 使用 v-show，即使元素被隐藏，DOM 结构仍然存在。这样可能会引入不必要的 DOM 元素，影响页面的性能。
潜在的逻辑混淆: v-show 解决的问题可能只是表面现象，没有真正解决数据和 DOM 渲染同步的问题。