vue3组合式怎么用fetch

在Vue 3中使用fetch可以通过在setup函数中使用async/await语法来实现。下面是一个简单的例子：

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

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const posts = ref([]);

    const fetchPosts = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      posts.value = data;
    };

    onMounted(() => {
      fetchPosts();
    });

    return {
      posts,
    };
  },
};
</script>

在这个例子中，我们首先使用`ref`创建了一个响应式的`posts`变量。我们在`setup`函数中定义了一个`fetchPosts`函数来异步获取数据，并在`onMounted`生命周期中调用它。在`fetchPosts`函数中，我们使用了`await`关键字来等待fetch请求的结果，并使用`json()`方法将结果转换为JSON格式的数据。最后，我们将数据赋值给`posts`变量，这将自动更新模板中的数据。

需要注意的是，由于`fetch`是异步操作，我们需要等待它的结果返回后再更新数据。因此，我们需要在`fetchPosts`函数前面加上`async`关键字，并在调用`fetchPosts`函数时使用`await`关键字来等待其完成。