面试题：通常在 Vue 的哪个生命周期钩子中请求异步数据？为什么？

在 Vue 中，通常在 created 或 mounted 生命周期钩子中请求异步数据。选择哪个钩子取决于具体的需求和场景。

一、为什么在 `created` 或 `mounted` 中请求异步数据？

1. `created` 钩子

触发时机：在实例创建完成后调用，此时 data、methods、computed 等已经初始化，但 DOM 还未生成。
优点：
- 尽早发起请求，减少用户等待时间。
- 适合不需要操作 DOM 的异步请求。
缺点：
- 无法操作 DOM，如果需要基于 DOM 的请求（如获取元素尺寸），则不适合。

2. `mounted` 钩子

触发时机：在实例挂载到 DOM 后调用，此时 DOM 已经渲染完成。
优点：
- 可以操作 DOM，适合需要基于 DOM 的请求。
- 确保 DOM 已存在，避免因 DOM 未渲染导致的错误。
缺点：
- 请求发起时间稍晚，可能会增加用户等待时间。

二、选择 `created` 还是 `mounted`？

1. 选择 `created` 的场景

不需要操作 DOM：如果异步请求不依赖 DOM，可以在 created 中发起请求。
尽早加载数据：如果希望尽早加载数据，减少用户等待时间，可以在 created 中发起请求。

2. 选择 `mounted` 的场景

需要操作 DOM：如果异步请求依赖 DOM（如获取元素尺寸、位置等），必须在 mounted 中发起请求。
确保 DOM 已存在：如果需要确保 DOM 已渲染完成，可以在 mounted 中发起请求。

三、代码示例

1. 在 `created` 中请求数据

<template>
  <div>
    <p v-if="loading">加载中...</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        this.data = await response.json();
      } catch (error) {
        console.error('请求失败:', error);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

2. 在 `mounted` 中请求数据

<template>
  <div ref="container">
    <p v-if="loading">加载中...</p>
    <p v-else>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      data: null
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        this.data = await response.json();
      } catch (error) {
        console.error('请求失败:', error);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>