Radix Vue中TagsInput组件直接修改只读计算值的Bug分析与修复

在Vue 3的响应式系统中，计算属性(computed)默认是只读的，这为状态管理提供了良好的约束。然而，Radix Vue项目中的TagsInput组件在处理标签删除操作时，却直接尝试修改这些只读的计算值，导致运行时错误。

问题本质

TagsInput组件在处理标签删除逻辑时，直接使用了数组的splice方法修改modelValue。当这个modelValue绑定的是一个计算属性时，Vue会抛出警告："Delete operation on key '1' failed: target is readonly"。

这种直接修改props或计算值的方式违反了Vue的单向数据流原则，正确的做法应该是通过emit事件让父组件来管理状态变更。

技术背景

Vue 3的响应式系统对计算属性做了严格限制：

1. 计算属性默认是只读的
2. 只有显式定义了setter的计算属性才可写
3. 直接修改只读属性会触发警告并失败

这种设计有助于维护应用状态的清晰性和可预测性，特别是在大型应用中。

解决方案

正确的实现应该遵循以下原则：

1. 对于删除操作：

// 错误方式
modelValue.value.splice(index, 1)

// 正确方式
const newValue = [...modelValue.value]
newValue.splice(index, 1)
emit('update:modelValue', newValue)

2. 对于添加操作：

// 错误方式
modelValue.value.push(payload)

// 正确方式
emit('update:modelValue', [...modelValue.value, payload])

最佳实践

在Vue组件开发中，处理类似数组状态更新时，应该：

1. 始终避免直接修改props或计算值
2. 使用不可变数据模式创建新数组
3. 通过emit事件通知父组件状态变更
4. 考虑使用Vue 3.2+提供的toSpliced等不可变数组方法

影响范围

这个bug会影响所有使用计算属性作为TagsInput的v-model绑定的场景，特别是：

1. 从Vuex/Pinia等状态管理库派生的计算属性
2. 基于其他props计算得出的数组
3. 任何只读的数据源

总结

Radix Vue的TagsInput组件通过修复这个bug，不仅解决了功能性问题，更重要的是遵循了Vue的最佳实践。这个案例提醒我们，在组件开发中要特别注意响应式数据的处理方式，特别是在涉及复杂状态管理时，保持数据的不可变性原则至关重要。