vue3 在页面中如何自动请求axios接口 在页面显示数据 已知axios封装的list接口文件在api文件夹 AppData,js，axios的封装为axios.js script部分请使用<script setup></script>

可以使用Vue3中的`<script setup>`语法来实现自动请求axios接口并在页面显示数据。

首先，我们需要在`<script setup>`中引入`axios.js`和`AppData.js`：

<script setup>
import axios from './api/axios';
import { getList } from './api/AppData';
</script>

接下来，在`<script setup>`的`onMounted`生命周期钩子中调用`getList`接口并将数据保存在`data`中：

<script setup>
import axios from './api/axios';
import { getList } from './api/AppData';

import { onMounted, reactive } from 'vue';

const data = reactive({
  list: []
});

onMounted(async () => {
  const res = await axios(getList);
  data.list = res.data;
});
</script>

最后，在页面中使用`data.list`来显示数据：

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

<script setup>
import axios from './api/axios';
import { getList } from './api/AppData';

import { onMounted, reactive } from 'vue';

const data = reactive({
  list: []
});

onMounted(async () => {
  const res = await axios(getList);
  data.list = res.data;
});
</script>