Vue3中如何修改对象key而不触发组件重新渲染？

核心问题在于你用了会变动的item.id作为v-for的key——Vue靠key识别组件实例，key一变就会销毁旧组件、创建新组件，自然触发重渲染和动画。要让Vue认为是同一个对象，换个创建后就不会变的稳定唯一标识当key就行，具体做法如下：

1. 给新对象加临时唯一标识
   创建新对象时，除了id:0，额外生成一个不会再变的唯一值（比如用浏览器原生的crypto.randomUUID()，或者自己写个简单的递增序列），作为临时标识：

// 示例：创建新对象
const newItem = {
  id: 0,
  tempId: crypto.randomUUID(), // 生成唯一临时ID，创建后不再修改
  name: "新创建的项"
};
this.sortedItems.push(newItem);

2. 把v-for的key绑定到临时标识
   修改模板里的key绑定，从item.id换成item.tempId：

<li class="list-item" v-for="item in sortedItems" :key="item.tempId">
  {{ item.name }} (id = {{ item.id }})
</li>

3. 更新真实ID时直接修改即可
   当从数据库拿到真实ID后，直接更新item.id——因为tempId这个key没变，Vue会复用原组件实例，只更新数据内容，不会触发重渲染和动画。

这个方案既保留了业务需要的真实ID，又保证了Vue组件实例的稳定性，完美解决你的问题。

内容的提问来源于stack exchange，提问作者Hendrik Jan