Vue computed属性getter中map转Item实例后splice失效如何解决

问题原因说明 #

1. 你在computed的getter中每次执行map都会生成全新的数组实例，数组内的每个元素也都是重新new Item()生成的全新实例，和之前返回的数组元素没有引用关系。
2. 执行this.computedItems.splice(key, 1)的实际流程是：
   • 先触发get拿到当前map生成的临时数组
   • 对该临时数组执行splice修改
   • 触发set把修改后的数组emit给父组件更新modelValue
   • modelValue更新后触发computed重新计算，再次用新的modelValuemap生成新的Item实例数组
3. 全等判断逻辑失效：你用item === i做匹配，但是每次map生成的都是新的实例，就算内容完全一致，引用地址不同也会返回false，容易出现找不到索引的问题。
4. 数据格式不匹配：如果父组件存储的modelValue是普通对象结构，你emit带Item实例的数组过去后，父组件如果没有做对应处理，下次传回子组件时你再次执行new Item()会出现实例嵌套的问题，进一步导致逻辑异常。

这种在computed的getter中做map转换的写法本身没有问题，适合仅需要读取转换后数据的场景，但如果后续需要对转换后的数组做修改操作，这种每次返回新实例的写法会破坏引用一致性，就会出现你遇到的无报错但不更新的问题。

解决方案 #

方案1（最推荐）：修改原始数据源，computed仅做读转换 #

computedItems只负责把原始modelValue转换成Item实例供渲染使用，修改操作直接提交给原始数据源：

removeItem(item) {
  // 提前给所有Item添加唯一标识字段（如id），不要用引用做匹配
  const newList = this.modelValue.filter(i => i.id !== item.id)
  this.$emit("update:modelValue", newList)
}

该方案不需要修改原有computed逻辑，既保证了数组元素都是Item实例，也完全符合单向数据流的设计规范，不会出现响应性问题。

方案2：维护本地响应式缓存数组 #

如果确实需要直接操作转换后的Item实例数组，可以新增一个本地响应式数组，同步modelValue的变化：

data() {
  return {
    localItems: []
  }
},
watch: {
  modelValue: {
    immediate: true,
    handler(val) {
      this.localItems = val?.map(item => new Item(item)) || []
    }
  }
},
methods: {
  removeItem(item) {
    const key = this.localItems.findIndex(i => i.id === item.id)
    this.localItems.splice(key, 1)
    // 本地修改后同步更新父组件数据源
    this.$emit("update:modelValue", this.localItems)
  }
}

后续所有渲染和操作都直接使用localItems即可。

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