vue3异步请求数据渲染

在 Vue3 中，你可以使用 `setup()` 函数中的 `onMounted()` 钩子来进行异步请求数据并渲染。具体步骤如下：

1. 安装 axios 或者其他的 HTTP 请求库。

2. 在 `setup()` 函数中使用 `ref()` 函数来定义响应式的变量，例如：

   import { ref } from 'vue';
   
   export default {
     setup() {
       const data = ref([]);
   
       return {
         data,
       };
     },
   };

3. 在 `onMounted()` 钩子中进行异步请求并将数据赋值给定义的响应式变量，例如：

   import axios from 'axios';
   
   export default {
     setup() {
       const data = ref([]);
   
       onMounted(() => {
         axios.get('/api/data').then((response) => {
           data.value = response.data;
         });
       });
   
       return {
         data,
       };
     },
   };

4. 在模板中使用定义的响应式变量来进行渲染，例如：

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

这样就完成了异步请求数据并渲染的过程。注意，`ref()` 函数返回的是一个对象，因此在访问响应式变量时需要使用 `.value`。