VUE3 TS 中对象类型的属性不可修改的原因

在Vue 3和TypeScript结合使用时，如果遇到对象类型的属性不可修改的问题，很可能是因为以下原因：

使用了reactive或ref来定义响应式数据，但是尝试直接修改一个不可扩展（non-extensible）的对象属性。

对象是由Object.freeze冻结的，这会使得任何尝试修改该对象的操作都被忽略。

使用了readonly函数将属性设置为只读。

解决方法：

确保你在尝试修改的属性存在于一个可扩展（extensible）的响应式对象中。如果是使用reactive定义的响应式对象，确保不是在对象已经被冻结之后添加新属性。

如果对象是由Object.freeze冻结的，在尝试修改前，先使用reactive或ref重新定义为响应式对象。

如果使用了readonly函数，确保不是在尝试修改只读属性，如果需要修改，请不要使用readonly。

import { reactive, readonly, ref } from 'vue';
 
// 使用reactive定义响应式对象
const state = reactive({
  property: 'value'
});
 
// 修改响应式对象的属性
state.property = 'new value'; // 这是允许的
 
// 如果需要创建一个只读的响应式对象，可以使用readonly
const readonlyState = readonly({
  property: 'value'
});
 
// 尝试修改只读对象的属性将不会生效
readonlyState.property = 'new value'; // 这是不允许的
 
// 如果需要修改，可以重新定义一个响应式对象
const newState = reactive({ ...readonlyState, property: 'new value' });