vue3 定义数组 直接键名取值

在Vue3中，定义数组和直接通过键名取值的方法与Vue2类似，但Vue3引入了Composition API，使得代码更加模块化和可重用。以下是如何在Vue3中定义数组并通过键名取值的示例：

### 定义数组
在Vue3中，可以使用`ref`或`reactive`来定义响应式数组。

import { ref, reactive } from 'vue';

export default {
  setup() {
    // 使用ref定义数组
    const itemsRef = ref(['item1', 'item2', 'item3']);

    // 使用reactive定义数组
    const itemsReactive = reactive(['item1', 'item2', 'item3']);

    // 直接通过键名取值
    const firstItemRef = itemsRef.value[0];
    const firstItemReactive = itemsReactive[0];

    return {
      itemsRef,
      itemsReactive,
      firstItemRef,
      firstItemReactive
    };
  }
};

### 模板中使用
在模板中可以直接使用这些定义的数组和变量。

<template>
  <div>
    <h2>使用ref定义的数组</h2>
    <p>第一个元素: {{ itemsRef[0] }}</p>
    <p>第一个元素: {{ firstItemRef }}</p>

    <h2>使用reactive定义的数组</h2>
    <p>第一个元素: {{ itemsReactive[0] }}</p>
    <p>第一个元素: {{ firstItemReactive }}</p>
  </div>
</template>

### 解释
1. **定义数组**：
- `ref`用于定义基本类型的响应式数据，但对于数组和对象也可以使用。
- `reactive`用于定义对象和数组的响应式数据。

2. **直接通过键名取值**：
- 对于`ref`定义的数组，需要使用`itemsRef.value`来访问数组本身。
- 对于`reactive`定义的数组，可以直接通过`itemsReactive`来访问。

通过这种方式，可以在Vue3中方便地定义和使用响应式数组，并通过键名直接取值。