Vue+TypeScript中如何正确声明对象数组类型的Ref？

• 基础声明与初始化
  直接使用ref()初始化空的对象数组，或者带默认数据的对象数组即可：

// 初始化空对象数组
const itemList = ref([])

// 带初始对象数据的数组
const itemList = ref([
  { id: 1, name: '测试项1' },
  { id: 2, name: '测试项2' }
])

这种方式下，Vue会自动对数组及内部的对象做深度响应式转换，不需要额外处理。

• 数据修改的正确姿势

1. 添加元素：直接调用数组原生方法，或者重新赋值数组

// 追加单个对象
itemList.value.push({ id: 3, name: '新添加项' })

// 批量替换或追加（展开运算符保持原数组响应式）
itemList.value = [...itemList.value, { id: 3, name: '新添加项' }]

2. 修改数组内对象的属性：直接访问修改即可，响应式会自动生效

// 修改第一个对象的name属性
itemList.value[0].name = '已修改名称'

• 避坑提醒
  不要给数组内的每个对象单独包裹ref()，这属于多余操作，反而会增加代码复杂度。ref()初始化对象数组时，内部对象已经被Vue处理为响应式了。

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