VueJS使用splice()删除动态渲染组件异常：点击删除总是删最后一项

阿华AIGC实验室

2026-5-6

解决Vue Todo应用删除总是删最后一项的问题

嘿，我帮你排查出问题啦！你遇到的“点击删除按钮总是删掉最后一项而非目标项”的问题，主要是两个核心原因在搞鬼：

1. `v-for`未绑定唯一`:key`，导致Vue组件复用错误

Vue的v-for在渲染列表时，如果没有给每个子项绑定唯一且稳定的key，会采用“就地复用”的策略。举个例子：当你删除索引为1的待办项时，Vue不会真的销毁第二个组件，而是把第三个组件的内容移到第二个位置，再销毁最后一个组件——这就造成了“看起来删了最后一项”的错觉，本质是Vue没正确识别每个组件的身份。

2. 手动调用`detach()`操作DOM，干扰了Vue的响应式更新

你在父组件的handleDelete里用了this.$refs.todos[index].$el.parentNode.detach()直接操作DOM，但Vue是数据驱动视图的框架，应该通过修改数组数据来让Vue自动更新视图。手动操作DOM会和Vue的虚拟DOM diff逻辑冲突，进一步加剧了组件复用的混乱。

解决方案：两步彻底修复问题

第一步：给`v-for`绑定唯一的`:key`

不要用循环索引当key（因为删除项后索引会变化），给每个todo项生成一个唯一ID（比如时间戳），然后绑定到:key上：

<!-- 父组件中的v-for部分 -->
<TodoItem 
  v-for="todo in todos" 
  :key="todo.id"  <!-- 绑定唯一ID作为key -->
  :todo="todo" 
  @delete="handleDelete"
/>

生成todo的时候记得加唯一ID：

// 父组件添加todo的逻辑
addTodo() {
  this.todos.push({
    id: Date.now(),  // 生成唯一ID
    content: `待办项 ${this.todos.length + 1}`
  });
}

第二步：移除手动DOM操作，完全通过数据驱动视图

删除detach()相关代码，父组件只需要通过修改数组来删除目标项。子组件触发删除事件时传递todo的ID，父组件找到对应项删除即可：

<!-- 子组件的删除按钮 -->
<button @click="$emit('delete', todo.id)">删除</button>

// 父组件的handleDelete方法
handleDelete(todoId) {
  // 通过ID找到对应的索引
  const targetIndex = this.todos.findIndex(item => item.id === todoId);
  if (targetIndex !== -1) {
    this.todos.splice(targetIndex, 1);  // 只修改数组，Vue自动更新视图
  }
}