Vue3 个人信息组件：使用 POST 请求获取数据并渲染

在 Vue3 中，可以使用 setup 函数来代替之前的生命周期函数，我们可以在该函数中发起 post 请求，将返回的数据存在 data 里面，最后渲染个人信息。

下面是一个简单的示例代码：

<template>
  <div>
    <p>{{ account }}</p>
    <p>{{ name }}</p>
    <p>{{ level }}</p>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue'

export default {
  setup() {
    const data = reactive({
      account: '',
      name: '',
      level: '',
    })

    onMounted(() => {
      fetch('/api/userinfo', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ userId: 123 }),
      })
        .then((res) => res.json())
        .then((res) => {
          data.account = res.account
          data.name = res.name
          data.level = res.level
        })
    })

    return {
      account: data.account,
      name: data.name,
      level: data.level,
    }
  },
}
</script>

在上面的例子中，我们使用了reactive函数来创建一个响应式的数据对象data，并在onMounted钩子函数中发起post请求，将返回的数据赋值给data，最后通过return语句将data中的数据暴露出去，以便在组件模板中使用。