解决首次加载数据空指针异常

起初效果：

使用async...await异步加载数据

最终效果：

代码：

<template>
  <div class="user-list-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">正在加载用户数据...</div>

    <!-- 用户列表 -->
    <div v-else>
      <ul v-if="users.length > 0" class="user-list">
        <li v-for="user in users" :key="user.id" class="user-item">
          {{ user.name }} ({{ user.email }})
        </li>
      </ul>
      <div v-else class="empty">没有加载到用户数据。</div>
    </div>
  </div>
</template>

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

// 响应式变量
const users = ref([]); // 用户列表
const loading = ref(true); // 加载状态

// 模拟异步加载数据的方法
const fetchUsers = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, name: "张三", email: "zhangsan@example.com" },
        { id: 2, name: "李四", email: "lisi@example.com" },
        { id: 3, name: "王五", email: "wangwu@example.com" },
      ]);
    }, 2000); // 模拟 2 秒延迟
  });
};

// 组件挂载时加载数据
onMounted(async () => {
  try {
    const data = await fetchUsers(); // 模拟异步加载用户数据
    users.value = data; // 更新用户列表
  } catch (error) {
    console.error("数据加载失败", error);
  } finally {
    loading.value = false; // 数据加载完成
  }
});
</script>

<style scoped>
.user-list-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.loading {
  text-align: center;
  font-size: 18px;
  color: gray;
}

.user-list {
  list-style-type: none;
  padding: 0;
}

.user-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}

.empty {
  text-align: center;
  font-size: 16px;
  color: gray;
}
</style>

使用.then()方法处理异步操作

<template>
  <div class="user-list-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">正在加载用户数据...</div>

    <!-- 用户列表 -->
    <div v-else>
      <ul v-if="users.length > 0" class="user-list">
        <li v-for="user in users" :key="user.id" class="user-item">
          {{ user.name }} ({{ user.email }})
        </li>
      </ul>
      <div v-else class="empty">没有加载到用户数据。</div>
    </div>
  </div>
</template>

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

// 响应式变量
const users = ref([]); // 用户列表
const loading = ref(true); // 加载状态

// 模拟异步加载数据的方法
const fetchUsers = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, name: "张三", email: "zhangsan@example.com" },
        { id: 2, name: "李四", email: "lisi@example.com" },
        { id: 3, name: "王五", email: "wangwu@example.com" },
      ]);
    }, 2000); // 模拟 2 秒延迟
  });
};

// 使用 .then() 方法加载数据
onMounted(() => {
  fetchUsers()
    .then((data) => {
      users.value = data; // 更新用户列表
    })
    .catch((error) => {
      console.error("数据加载失败", error);
    })
    .finally(() => {
      loading.value = false; // 数据加载完成
    });
});
</script>

<style scoped>
.user-list-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.loading {
  text-align: center;
  font-size: 18px;
  color: gray;
}

.user-list {
  list-style-type: none;
  padding: 0;
}

.user-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}

.empty {
  text-align: center;
  font-size: 16px;
  color: gray;
}
</style>