使用VueJs将api中的数据填充到Array中

在使用Vue.js将API中的数据填充到数组中时，我们通常会涉及到以下几个基础概念：

基础概念

Vue.js: 一个渐进式JavaScript框架，用于构建用户界面。
API: 应用程序编程接口，允许不同的软件组件相互通信。
异步操作: 如HTTP请求，通常使用fetch或axios等库来处理。
响应式数据: Vue.js的核心特性之一，允许数据的变化自动更新DOM。

类型与应用场景

类型: 这通常涉及到前端开发中的数据获取和处理。
应用场景: 在构建单页应用程序（SPA）时，经常需要从服务器获取数据并展示给用户。

示例代码

以下是一个简单的Vue 3示例，展示如何使用fetch API从服务器获取数据并将其填充到数组中：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const items = ref([]);

    onMounted(async () => {
      try {
        const response = await fetch('https://api.example.com/items');
        const data = await response.json();
        items.value = data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    });

    return { items };
  }
};
</script>