vue3+ts定义一个响应式的数组

### 定义数组 在 Vue 3 中使用 TypeScript 来定义数组，可以利用 Composition API 和 ref 或 reactive 函数来创建响应式的数组变量。下面展示两种常见的方式。 #### 使用 `ref` 创建基本类型的数组 对于简单的场景，可以直接通过 `ref<T[]>(initialValue)` 方法初始化一个带有泛型参数 T 数组的响应式引用对象： ```typescript import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const stringArray = ref<string[]>(['apple', 'banana']); return { stringArray, }; }, }); ``` 此方法适用于不需要复杂状态管理的情况[^1]。 #### 使用 `reactive` 创建更复杂的结构化数据 当处理更为复杂的嵌套对象或类实例组成的集合时，则更适合采用 `reactive()` 方式来进行深层次的数据绑定操作: ```typescript 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, }; } }); ``` 上述例子展示了如何声明接口并将其作为类型约束应用于由多个具有相同字段的对象构成的列表上；同时也提供了一个用于向该列表添加新成员的方法示例。

### 在 Vue 3 和 TypeScript 环境中声明字符串数组的方法 在 Vue 3 和 TypeScript 的组合环境中，声明一个字符串数组可以通过以下几种方式实现： #### 方法一：使用 TypeScript 的类型注解 可以直接在变量声明时指定其为字符串数组类型。TypeScript 提供了两种等价的方式来定义字符串数组类型：`string[]` 或 `Array<string>`。 ```typescript let stringArray: string[] = []; // 使用 string[] 定义字符串数组[^1] let anotherStringArray: Array<string> = []; // 使用 Array<string> 定义字符串数组[^1] ``` 这两种方式功能上完全一致，可以根据个人或团队的编码风格选择其中之一。 #### 方法二：结合 Vue 3 的响应式系统 如果需要在 Vue 3 中创建一个响应式的字符串数组，可以使用 Vue 提供的 `reactive` 或 `ref` 函数，并结合 TypeScript 类型注解。 ##### 使用 `ref` `ref` 是用于创建响应式基本类型或对象（包括数组）的函数。通过指定类型注解，可以明确数组中的元素为字符串类型。 ```typescript import { ref } from 'vue'; const reactiveStringArray = ref<string[]>([]); // 声明一个空的响应式字符串数组[^4] ``` ##### 使用 `reactive` `reactive` 适用于创建响应式的对象或复杂数据结构。对于数组，推荐直接使用 `ref`，但也可以通过 `reactive` 来实现。 ```typescript import { reactive } from 'vue'; const reactiveStringArray = reactive<string[]>([]); // 声明一个空的响应式字符串数组[^4] ``` #### 方法三：结合组件 Props 如果需要在 Vue 组件中接收一个字符串数组作为 Prop，可以在 `defineProps` 中定义其类型。 ```typescript <script setup lang="ts"> const props = defineProps({ stringArrayProp: { type: Array as () => string[], // 明确 Prop 类型为字符串数组[^2] required: true, }, }); </script> ``` #### 方法四：结合自定义事件 如果需要通过事件更新父组件中的字符串数组，可以使用 `emit` 定义事件并传递字符串数组。 ```typescript <script setup lang="ts"> const emit = defineEmits<{ (e: 'update:stringArray', value: string[]): void; }>(); function updateParentArray(newArray: string[]) { emit('update:stringArray', newArray); // 触发事件并传递字符串数组[^3] } </script> ``` ### 示例代码 以下是一个完整的示例，展示了如何在 Vue 3 和 TypeScript 环境中声明和使用字符串数组： ```typescript <script setup lang="ts"> import { ref } from 'vue'; // 声明一个空的响应式字符串数组 const stringArray = ref<string[]>([]); // 添加元素到数组中 function addItem(item: string) { stringArray.value.push(item); } // 移除数组中的第一个元素 function removeFirstItem() { if (stringArray.value.length > 0) { stringArray.value.shift(); } } </script> <template> <div> <input v-model="newItem" placeholder="输入新项" /> <button @click="addItem(newItem)">添加</button> <button @click="removeFirstItem">移除第一个</button> <ul> <li v-for="(item, index) in stringArray" :key="index">{{ item }}</li> </ul> </div> </template> ```