Vue3技术问题：无法从响应式数组中移除Proxy对象

问题分析 #

从你的代码和描述来看，控制台显示传入的id正确，但filter方法未生效，核心原因大概率是ID类型不匹配：父组件生成的id是数字类型（new Date().valueOf()返回数字），而子组件触发destroy事件时可能传递了字符串类型的id，导致token.id !== id的比较始终不成立，无法过滤目标元素。

另外，代码中使用toRaw(token)属于多余操作——token.id是基本类型，不受响应式包装影响，直接访问即可。

具体解决方案 #

1. 统一ID类型，确保比较准确

修改removeToken方法，先将传入的id转换为与父组件一致的数字类型，再执行过滤：

const removeToken = (id) => {
  // 统一转换为数字类型，避免类型不匹配
  const targetId = typeof id === 'string' ? Number(id) : id;
  // 直接过滤，无需toRaw
  tokens.value = tokens.value.filter(token => token.id !== targetId);
}

2. 用splice替代filter（可选）

如果更倾向于直接修改原数组，可使用splice方法（Vue3会监听数组的splice操作触发响应式更新）：

const removeToken = (id) => {
  const targetId = typeof id === 'string' ? Number(id) : id;
  const index = tokens.value.findIndex(token => token.id === targetId);
  if (index !== -1) {
    tokens.value.splice(index, 1);
  }
}

3. 检查子组件的事件触发逻辑

确保子组件传递的id与父组件传入的id完全一致：

• 若子组件使用<script setup>，触发事件时直接传递props的id：

  const props = defineProps(['id']);
  const emit = defineEmits(['destroy']);
  
  // 触发销毁事件时
  emit('destroy', props.id);
  

验证方法 #

在removeToken中添加类型打印，确认类型是否匹配：

const removeToken = (id) => {
  console.log('传入的id类型:', typeof id);
  console.log('数组中token的id类型:', typeof tokens.value[0]?.id);
  // ...后续逻辑
}

如果类型不一致，统一类型后问题即可解决；若类型一致仍未生效，可检查tokens是否为正确的响应式对象（确认是用ref([])创建的）。

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