vue3 定义数组键名和值

在Vue 3中，定义数组的键名和值可以通过多种方式实现。以下是几种常见的方法：

1. **使用`reactive`或`ref`定义数组**：
Vue 3提供了`reactive`和`ref`来定义响应式数据。你可以使用它们来定义数组并设置键名和值。

   import { reactive, ref } from 'vue';

   // 使用 reactive
   const myArray = reactive([
     { id: 1, name: 'Alice' },
     { id: 2, name: 'Bob' }
   ]);

   // 使用 ref
   const myArrayRef = ref([
     { id: 1, name: 'Alice' },
     { id: 2, name: 'Bob' }
   ]);

2. **动态添加元素**：
你可以动态地向数组中添加元素，并确保键名和值被正确设置。

   // 动态添加元素
   myArray.push({ id: 3, name: 'Charlie' });
   myArrayRef.value.push({ id: 3, name: 'Charlie' });

3. **使用`computed`计算属性**：
你可以使用`computed`计算属性来定义基于现有数据的数组。

   import { reactive, computed } from 'vue';

   const myArray = reactive([
     { id: 1, name: 'Alice' },
     { id: 2, name: 'Bob' }
   ]);

   const computedArray = computed(() => {
     return myArray.map(item => ({
       key: item.id,
       value: item.name
     }));
   });

4. **在模板中使用`v-for`渲染数组**：
在模板中，你可以使用`v-for`指令来遍历数组并渲染键名和值。

   <template>
     <div>
       <div v-for="item in myArray" :key="item.id">
         <span>{{ item.id }}</span>: <span>{{ item.name }}</span>
       </div>
     </div>
   </template>

通过以上方法，你可以在Vue 3中灵活地定义数组的键名和值，并确保数据的响应式更新。