声明Ref强类型数组需外层ref包装、内层明确对象结构，推荐用interface定义类型，ref泛型必须是对象数组类型，初始化为空时须显式标注，访问通过.value，模板中可直接解构。
要声明和初始化一个包含特定对象的 Ref 强类型数组，核心是两层类型控制：外层用 ref 包装，内层明确数组元素的结构（即对象类型），且整个 ref 的 value 必须是该对象类型的数组。
明确对象结构，定义接口或类型别名
先为数组中每个对象规定形状。推荐使用 interface，语义清晰、支持继承与扩展：
interface User {
id: number;
name: string;
isActive?: boolean;
}
也可以用 type，适合简单或联合场景：
type Product = {
sku: string;
price: number;
};
声明 ref 数组：两种等效写法
关键点：ref 的泛型参数必须是「对象数组类型」，不是单个对象类型。
- 写法一（推荐）：用
Ref<User[]>显式标注
import { ref, Ref } from 'vue';
const users = ref<User[]>([
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob', isActive: true }
]);
- 写法二：利用 TypeScript 类型推导，省略泛型（前提是初始化时提供了完整数组）
const products = ref([
{ sku: 'P001', price: 99.9 },
{ sku: 'P002', price: 149.5 }
]); // ✅ 自动推导为 Ref<Product[]>
⚠️ 注意：如果初始化为空数组 []，TS 无法推导元素类型，必须显式写 ref<User[]>([])，否则 value 会被判为 any[]。
访问与修改 ref 数组中的对象
所有操作都通过 .value 进行，且保持响应式：
- 读取：
users.value[0].name - 追加：
users.value.push({ id: 3, name: 'Charlie' }) - 更新属性：
users.value[1].isActive = false - 替换整个数组：
users.value = [...users.value, { id: 4, name: 'Diana' }]
✅ Vue 模板中可直接解构使用（无需 .value）：<div v-for="u in users">{{ u.name }}</div>
进阶：配合泛型函数或组合式 API 复用
若需动态创建不同对象类型的 ref 数组，可封装通用函数：
function useRefArray<T>(initial: T[] = []) {
return ref<T[]>(initial);
}
const posts = useRefArray<{ id: number; title: string }>();
const tags = useRefArray<string>(['vue', 'ts']);
这样既保证类型安全，又避免重复写 ref<...[]>。
