如何在数据加载完成前处理Vue组件内容

在Vue中处理数据加载完成前的组件内容，通常涉及到组件的生命周期钩子和条件渲染。以下是一些基础概念和相关策略：

基础概念

生命周期钩子：Vue组件有一系列的生命周期钩子，允许你在组件的不同阶段执行代码。例如，created、mounted等。
条件渲染：Vue提供了v-if、v-else、v-show等指令来根据表达式的真假来条件性地渲染元素。
异步组件：Vue允许你定义异步组件，这些组件可以根据需要动态加载。

类型与应用场景

骨架屏：在数据加载完成前显示一个简单的页面结构，提升用户体验。
加载指示器：显示旋转的加载图标或其他动画，告知用户正在加载。
错误处理：如果数据加载失败，显示错误信息和重试按钮。

示例代码

以下是一个简单的Vue 3组件示例，展示了如何在数据加载完成前显示加载状态：

<template>
  <div>
    <!-- 加载状态 -->
    <div v-if="isLoading">Loading...</div>

    <!-- 数据加载完成后的内容 -->
    <div v-else>
      <h1>{{ data.title }}</h1>
      <p>{{ data.description }}</p>
    </div>
  </div>
</template>

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

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

    onMounted(async () => {
      try {
        // 模拟异步数据获取
        const response = await fetch('https://api.example.com/data');
        data.value = await response.json();
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        isLoading.value = false;
      }
    });

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