uniappt vue3中，怎么获取用户列表并显示到页面，给个例子

在 uni-app 中使用 Vue3 获取用户列表并显示到页面，可以通过以下步骤实现。

1. 定义用户列表组件

首先，你需要定义一个用户列表组件，用来显示用户列表。假设你已经定义了一个 `UserList` 组件，你可以按照以下方式进行编写：

<template>
  <div>
    <div v-for="user in userList" :key="user.id">
      {{ user.name }}
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue'
import { getUserList } from '@/api/user'

export default {
  setup() {
    const state = reactive({
      userList: []
    })

    onMounted(() => {
      getUserList().then(res => {
        state.userList = res.data
      })
    })

    return {
      userList: state.userList
    }
  }
}
</script>

在这里，我们使用了 Vue3 中的 `setup` 函数，然后在函数内部使用 `reactive` 函数定义了一个响应式的状态对象 `state`，其中包含了用户列表 `userList`。然后，我们使用 `onMounted` 函数在组件挂载后发送网络请求，获取用户列表数据，并将数据保存到 `userList` 中。最后，我们将 `userList` 对象暴露给模板，以便在页面中进行渲染。

2. 编写获取用户列表数据的 API

在上面的代码中，我们调用了一个名为 `getUserList` 的函数来获取用户列表数据。这个函数应该是一个网络请求函数，你需要根据你的实际需求进行编写。

例如，你可以按照以下方式定义一个获取用户列表数据的 API：

import request from '@/utils/request'

export function getUserList() {
  return request({
    url: '/user/list',
    method: 'get'
  })
}

在这里，我们使用了一个名为 `request` 的网络请求函数来发送网络请求。你需要根据你的实际需求来定义这个函数。

3. 在页面中使用用户列表组件

最后，你可以在页面中使用刚才定义的用户列表组件。例如，你可以按照以下方式进行编写：

<template>
  <div>
    <user-list />
  </div>
</template>

<script>
import UserList from '@/components/UserList.vue'

export default {
  components: {
    UserList
  }
}
</script>

在这里，我们将 `UserList` 组件注册为全局组件，并在页面中使用。当页面被渲染时，`UserList` 组件会自动发送网络请求，获取用户列表数据，并将数据渲染到页面中。