בדומה לריאקט גם ויו כבר תומך בקומפוננטות אסינכרוניות ואצלם כרגיל התחביר יותר פשוט ממה שאנחנו מכירים מריאקט. במקום להוסיף פונקציה סודית שמקבלת Promise, הם פשוט מאפשרים לכתוב את setup בצורה אסינכרונית. עשיתי ניסוי עם קומפוננטה פשוטה כדי לראות איך זה עובד. התוצאה בלינק:

https://asyncvue-nr26xan9r48q.deno.dev/

1. קוד הקומפוננטה

קוד הקומפוננטה יצא מאוד פשוט - יש לייצא אוביקט שמגדיר פונקציית setup אסינכרונית שמייצאת את אוביקט המידע שיגיע ל template. באופן אוטומטי ויו יפעיל את הפונקציה ורק כשהמידע יהיה מוכן ירנדר את התבנית. זה הקוד:

<template>
  <h2>({{ person.id }}) {{ person.name }}</h2>
  <p>{{ person.url }}</p>
</template>

<script>
import { ref } from 'vue'

export default {
  async setup() {
    const person = ref({
      id: 2,
      name: '',
      url: ''
    })

    try {
      await fetch(`https://swapi.dev/api/people/${person.value.id}`)
      .then(response => response.json())
      .then(data => {
        person.value.name = data.name
        person.value.url  = data.url
      })
    } catch (err) {
      console.error(err);
    }


    return { person }
  }
}
</script>

2. הקוד שמפעיל

בקומפוננטה שקוראת לקוד האסינכרוני לא צריך בכלל להתייחס לסיפור האסינכרוני בזכות קומפוננטת Suspense, וכן פה זה כבר ממש כמו בריאקט:

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Person from './components/Person.vue'
</script>

<template>
  <h1>Header</h1>
  <suspense>
    <person />
  </suspense>
  <h1>Footer</h1>
</template>

נשים לב שקומפוננטה אסינכרונית יכולה להופיע רק בתוך קומפוננטת suspense, וזה הגיוני כי ה suspense בעצם "מחכה" שה Promise תתבצע כדי להציג את המידע.

3. מה עוד נשאר

הקוד עובד אבל יש עוד לאן להמשיך בניסוי הזה, לדוגמה אפשר לקבל את ה id מהקומפוננטה החיצונית ולשלוח בקשת רשת נוספת כל פעם שה id משתנה, אבל אם אנחנו כבר עושים את הצעד אולי נרצה להשתמש בספריה כמו vue-query שעושה את זה אוטומטית וגם שומרת cache של בקשות ישנות.