Vue组件问题：Number类型Prop的监听器未触发

核心原因 #

问题出在v-for使用index作为key的机制上：
当数组元素增删或顺序变化时，Vue的虚拟DOM会复用现有组件实例，而非更新组件的index prop。举个实际场景：

• 假设当前results是[B]，对应一个my-result组件实例，index为0。
• 调用addItem(A)后，results变成[A, B]。此时v-for会把原组件实例复用给新的第一个元素（A），仅更新它的result prop；而B会由新创建的组件实例渲染，它的index是1（属于首次赋值，不会触发watch）。
• 原组件实例的index始终为0，自然不会触发index的watch；新组件实例的index是首次赋值，同样不会触发watch。

删除元素时逻辑类似：删除index=0的元素后，原index=1的元素变为index=0，Vue会复用原组件实例仅更新result prop，或者直接销毁重建组件，都无法触发index的watch。

解决方案 #

1. 使用元素唯一标识作为v-for的key（最佳实践） #

不要用index，改用每个result对象的唯一标识（比如id字段）作为key。这样Vue能精准匹配元素与组件实例，数组变化时会正确更新组件的index prop，触发对应的watch。

2. 修改代码示例 #

模板部分：

<div v-for="(result, index) in results" :key="result.id">
  <my-result :result="result" :index="index"></my-result>
</div>

如果result没有自带唯一ID，添加时手动生成：

methods: {
  addItem(item) {
    // 生成唯一标识
    item.id = Date.now() + Math.random();
    this.results.splice(0, 0, item);
  },
  removeItem(index) {
    this.results.splice(index, 1);
  }
}

3. 效果验证 #

修改后，添加或删除元素时，每个my-result组件的index prop会正确更新，index_updated方法会被触发。

额外说明 #

如果确实需要临时用index作为key（不推荐），可以通过给index prop绑定额外变量（比如数组长度）强制触发更新，但这属于hack手段，不建议在生产环境使用。始终优先使用元素唯一标识作为v-for的key。

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