Vue.js: What is the difference between useAsyncData and useFetch in Nuxt 3?

1<script setup>
2// useFetch
3const { data } = await useFetch("/api/posts")
4
5// useAsyncData
6const { data } = await useAsyncData("posts", () => {
7    return $fetch("/api/posts")
8})
9
10// useAsyncData with options
11const { data } = await useAsyncData("posts", async () => {
12    const [posts, users] = await Promise.all([
13        $fetch("/api/posts"),
14        $fetch("/api/users")
15    ])
16    return { posts, users }
17})
18</script>