Vue中v-for创建组件时beforeDestroy钩子异常触发问题求助

这个问题的核心原因是v-for没有绑定稳定的唯一key，导致Vue在列表更新时错误地复用/销毁组件实例。

问题根源 #

Vue的列表渲染默认采用「就地复用」策略：如果没有给v-for的元素/组件指定唯一且稳定的key，Vue会用数组索引作为默认key。当数组发生变化（比如新增、删除、排序元素），索引的变化会让Vue误以为某些旧组件需要销毁，从而触发它们的beforeDestroy钩子，而实际上这些组件应该被保留。

解决方法 #

给v-for绑定一个与数组元素一一对应的唯一标识作为key，不要用数组索引：

1. 首先确保你的数据源每个元素都有唯一id（如果没有可以手动生成）：

// 示例数据源，每个元素带唯一id
const fields = ref([
  { id: 'input_001', value: '' },
  { id: 'input_002', value: '' }
])

2. 在模板中绑定这个id作为key：

<InputField
  v-for="field in fields"
  :key="field.id"
  :model-value="field.value"
  @update:model-value="(val) => field.value = val"
/>

为什么这样有效？ #

Vue通过key来追踪每个组件实例的身份，当数组更新时，只会对真正新增/删除的组件执行创建/销毁逻辑，不会误触其他组件的生命周期钩子。

注意事项 #

• 绝对不要用数组索引作为key，尤其是当数组存在插入、删除、排序操作时，索引是不稳定的，会持续引发组件复用混乱。
• 如果数据没有天然唯一id，可以用uuid库生成，或者在新增元素时用Date.now() + Math.random()这类方式生成临时唯一标识。

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