面试题：Vue 在 created 和 mounted 这两个生命周期钩子中请求数据有什么区别？

在 Vue 中，created 和 mounted 是两个常用的生命周期钩子，它们都可以用于请求数据，但它们的执行时机和适用场景有所不同。以下是它们的区别：

1. 执行时机

created：
- 在 Vue 实例创建完成后调用，此时 DOM 还未生成。
- 适合在组件初始化时请求数据，但不涉及 DOM 操作。
mounted：
- 在 Vue 实例挂载到 DOM 后调用，此时 DOM 已经生成。
- 适合在需要操作 DOM 或依赖 DOM 渲染的情况下请求数据。

2. 适用场景

created：
- 适合请求不需要依赖 DOM 的数据。
- 例如：从后端 API 获取数据并初始化组件的状态。
- 优点：尽早请求数据，可以更快地开始数据加载。
mounted：
- 适合请求依赖 DOM 的数据或需要在 DOM 渲染完成后执行的操作。
- 例如：根据 DOM 元素的尺寸或位置加载数据，或初始化第三方库（如地图、图表等）。
- 优点：确保 DOM 已渲染，可以安全地操作 DOM。

3. 代码示例

在 `created` 中请求数据

export default {
  data() {
    return {
      posts: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await axios.get('/api/posts');
      this.posts = response.data;
    }
  }
};

特点：数据请求在组件初始化时就开始，不依赖 DOM。

在 `mounted` 中请求数据

export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await axios.get('/api/posts');
      this.posts = response.data;
    }
  }
};

特点：数据请求在 DOM 渲染完成后开始，适合依赖 DOM 的操作。

4. 性能影响

created：
- 数据请求更早开始，可以更快地获取数据并渲染页面。
- 但如果数据量较大或请求较慢，可能会导致页面渲染延迟。
mounted：
- 数据请求稍晚开始，但可以确保 DOM 已渲染，适合需要依赖 DOM 的场景。
- 如果数据请求较慢，用户可能会看到部分空白内容。

5. 总结

特性	`created`	`mounted`
执行时机	组件实例创建完成，DOM 未生成	组件挂载到 DOM 后，DOM 已生成
适用场景	不依赖 DOM 的数据请求	依赖 DOM 的数据请求或操作
性能影响	数据请求更早开始，可能延迟渲染	数据请求稍晚开始，确保 DOM 已渲染
推荐使用场景	初始化数据、不涉及 DOM 的操作	依赖 DOM 的操作、第三方库初始化