前端面试题188（vue在created和mounted这两个生命周期中请求数据有什么区别）

在Vue中，created和mounted是两个重要的生命周期钩子函数，它们分别在组件实例被创建和被挂载到DOM后调用。关于在这两个钩子中请求数据的区别，主要体现在以下几个方面：

1. DOM访问

• created: 此时组件已经创建完成，数据观测(data observer)也已经设置好，但是尚未挂载到DOM中。因此，在这个阶段，你无法访问到DOM元素，如果你的请求数据逻辑依赖于DOM的操作（比如获取元素尺寸、绑定事件等），在这个阶段执行可能会出现问题。

• mounted: 组件已经被挂载到DOM中，所有的子组件和DOM元素都已经渲染完成。在这个阶段，你可以安全地进行DOM操作或者依赖于DOM状态的逻辑处理。

2. 用户体验

• 请求数据放在created中执行，数据请求会尽早开始，但用户可能还看不到任何界面变化，因为DOM还未渲染。这种方式适用于那些不依赖于DOM信息的异步数据加载，可以尽快开始后台任务。

• 请求数据放在mounted中执行，用户可以看到基本的页面结构加载出来，然后数据再填充进来。这种方式对于提升首次渲染速度和用户体验较为友好，尤其是当数据加载时间较长时，用户至少能看到页面框架。

示例代码

在created中请求数据

export default {
  name: 'MyComponent',
  data() {
    return {
      itemList: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 假设这是你的数据请求方法
      axios.get('api/items')
        .then(response => {
          this.itemList = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};

在mounted中请求数据

export default {
  name: 'MyComponent',
  data() {
    return {
      itemList: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 同样的数据请求逻辑
      axios.get('api/items')
        .then(response => {
          this.itemList = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};

总结

选择在created还是mounted中发起数据请求，取决于你的具体需求：如果数据请求不依赖DOM操作且希望尽早开始加载数据，可以选择在created；如果需要确保DOM已渲染完成再进行数据填充或有DOM操作的需求，则应选择在mounted中进行。在实际开发中，根据具体情况灵活选择，以达到最佳的用户体验。