Vue3 调用后台接口示例代码 - 详细指南

<template>
  <div>
    <div v-if='loading'>Loading...</div>
    <div v-else>
      <ul>
        <li v-for='item in items' :key='item.id'>{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'

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

    const fetchItems = async () => {
      loading.value = true
      try {
        const response = await fetch('/api/items')
        const data = await response.json()
        items.value = data
      } catch (error) {
        console.error(error)
      } finally {
        loading.value = false
      }  
    }

    onMounted(() => {
      fetchItems()
    })

    return {
      items,
      loading
    }
  }
}
</script>
<p>在这个示例中，我们使用了 Vue3 的 <code>ref</code> 和 <code>onMounted</code> 函数来创建响应式的数据和触发数据的获取。在 <code>setup</code> 函数中，我们定义了 <code>items</code> 和 <code>loading</code> 变量，并且定义了 <code>fetchItems</code> 函数来获取数据。在组件挂载后，我们调用 <code>fetchItems</code> 函数来获取数据并更新 <code>items</code> 变量。在模板中，我们使用 <code>v-if</code> 和 <code>v-else</code> 来根据 <code>loading</code> 变量显示不同的内容。我们使用 <code>v-for</code> 来遍历 <code>items</code> 变量并显示列表项。在 <code>li</code> 元素中，我们使用 <code>:key</code> 属性来告诉 Vue 如何区分不同的列表项。注意，在实际开发中，我们需要根据实际情况调整代码来适应后台接口的返回数据。</p>