在vuejs3中显示异步数据的属性

<template>
  <div v-if="data">
    <!-- 使用数据进行渲染 -->
  </div>
</template>

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

export default {
  setup() {
    const data = ref(null);

    onMounted(async () => {
      data.value = await fetchData();
    });

    return { data };
  }
};
</script>

import { ref } from 'vue';

const data = ref([]);

// 更新数据
data.value = newData;

<template>
  <div>
    <h1>异步数据展示</h1>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

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

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

    onMounted(async () => {
      try {
        const response = await fetch('https://api.example.com/items');
        const data = await response.json();
        items.value = data;
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    });

    return { items };
  }
};
</script>