vue3+ts定义数组

定义数组
在 Vue 3 中使用 TypeScript 来定义数组，可以利用 Composition API 和 ref 或 reactive 函数来创建响应式的数组变量。下面展示两种常见的方式。
使用 ref 创建基本类型的数组
对于简单的场景，可以直接通过 ref<T[]>(initialValue) 方法初始化一个带有泛型参数 T 数组的响应式引用对象：
import { defineComponent, ref } from 'vue';

export default defineComponent({
setup() {
const stringArray = ref<string[]>(['apple', 'banana']);

return {
stringArray,
};
},
});
登录后复制
此方法适用于不需要复杂状态管理的情况[^1]。
使用 reactive 创建更复杂的结构化数据
当处理更为复杂的嵌套对象或类实例组成的集合时，则更适合采用 reactive() 方式来进行深层次的数据绑定操作:
import { defineComponent, reactive } from 'vue';
interface Person {
name: string;
age?: number; // 可选属性
}

export default defineComponent({
setup() {
let peopleList = reactive<Person[]>([
{name: "Alice"},
{name: "Bob", age: 27}
]);

function addPerson(person: Partial<Person>) {
peopleList.push({...person});
}

return {
peopleList,
addPerson,
};
}
});
登录后复制
上述例子展示了如何声明接口并将其作为类型约束应用于由多个具有相同字段的对象构成的列表上；同时也提供了一个用于向该列表添加新成员的方法示例。