Vue3：可写计算属性处理数组时不符合预期

这是Vue3的预期行为，你的使用方式存在误区，具体原因和解决办法如下：

核心原因 #

1. Vue的readonly()是深层只读处理：不仅根对象不可修改，数组的每个元素、嵌套对象的属性都会被设为只读。
2. 数组元素的修改绕过了计算属性拦截：当你在模板中用v-model="languages[i]"时，底层是直接对readonly数组的索引i赋值，这个操作根本没走到可写计算属性的set方法里——因为计算属性返回的是整个readonly数组，v-model绑定数组元素时，直接操作的是数组本身，而非计算属性的返回值。
3. 基本类型能正常工作的原因：字符串、数字等值类型在计算属性get时返回的是副本，v-model修改的是计算属性set接收的参数，最终通过状态库方法更新源数据，不会触碰readonly的源对象。

解决办法 #

方法1：手动处理输入事件，绕过直接修改数组 #

放弃直接用v-model绑定数组元素，改用input事件触发状态更新：

<!-- 模板部分 -->
<input 
  :value="languages[i]" 
  @input="updateLanguageItem(i, $event.target.value)"
/>

// 脚本部分
function updateLanguageItem(index, newValue) {
  // 调用你的状态库更新方法，传入索引和新值
  store.updateLanguage(index, newValue);
}

方法2：为每个数组元素单独创建可写计算属性 #

把单个元素的修改逻辑封装到独立的计算属性中，确保修改走状态库方法：

// 脚本部分
const getLanguageItem = (index) => {
  return computed({
    get() {
      return store.state.languages[index];
    },
    set(newVal) {
      store.updateLanguage(index, newVal);
    }
  });
};

<!-- 模板部分 -->
<input v-model="getLanguageItem(i)" />

总结 #

Vue的readonly机制就是为了防止直接修改响应式对象，你的数组修改操作刚好触发了这个保护。只要调整绑定方式，确保所有修改都通过状态库的专属方法执行，就能解决这个问题。

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