vue3请求数据并渲染

在Vue3中，我们可以使用Composition API来请求数据并渲染到模板中。以下是一个简单的示例代码：

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

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

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

    const getPosts = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
      state.posts = await response.json()
    }

    onMounted(() => {
      getPosts()
    })

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

在上面的代码中，我们使用`reactive`创建一个响应式的状态对象`state`，并定义了一个名为`getPosts`的异步函数来获取数据。我们通过`onMounted`钩子在组件挂载后调用`getPosts`函数来获取数据，并将数据存储在`state.posts`中。

最后，我们通过`return`语句将`posts`暴露给模板，以便在模板中使用。在模板中，我们使用`v-for`指令循环遍历`posts`数组，并在每个`li`元素中显示`post.title`属性的值。