Vue 生命周期中发起请求的最佳位置

问题

在 Vue 组件中，应该在哪个生命周期钩子发起 HTTP 请求？

解答

推荐在 mounted 生命周期钩子中发起请求。

为什么选择 mounted

DOM 已完成渲染

mounted 钩子在组件 DOM 插入文档后调用，此时所有 DOM 元素已存在。如果请求结果需要操作 DOM，在 mounted 中发起请求是安全的。

避免资源浪费

在 created 中发起请求可能导致组件在请求完成前被销毁，引发内存泄漏或资源浪费。等待组件挂载完成再请求可以减少这些问题。

便于状态管理

在 mounted 中发起请求，可以在请求前设置加载状态，请求后更新数据或处理错误，状态管理更清晰。

代码示例

export default {
  data() {
    return {
      items: [],
      loading: false,
      error: null
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.loading = true;
      this.error = null;
      
      try {
        const response = await fetch('/api/items');
        this.items = await response.json();
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    }
  }
};

特殊场景使用 created

某些情况下需要在 created 中发起请求：

SSR（服务器端渲染）

服务器端不会调用 mounted 钩子，因为 DOM 不会真正挂载，此时需要在 created 中发起请求。

数据预加载

如果组件挂载前就需要某些数据来初始化，可以在 created 中发起请求，确保数据在挂载时已可用。

关键点

• 优先在 mounted 中发起请求，此时 DOM 已渲染完成
• created 中发起请求可能导致组件销毁时的资源浪费
• SSR 场景必须使用 created，因为服务端不会触发 mounted
• 请求前后要正确管理 loading 和 error 状态