01 - Vue2 | 在哪个生命周期进行网络请求

在Vue2中，组件有多个生命周期钩子函数，每个钩子函数都有其特定的调用时间和作用。了解在不同生命周期发送网络请求的区别，能够帮助我们更好地设计和优化Vue应用。本文将探讨这些区别，并分析在父子组件中发送网络请求时的不同处理方式。

1. 在不同的生命周期发送网络请求会有什么区别

首先，我们来看一下Vue2中的生命周期钩子函数及其调用时机：

生命周期钩子	调用时机
beforeCreate	实例初始化之后，数据观测和事件配置之前
created	实例创建完成，数据观测和事件配置完成，DOM未挂载
beforeMount	在挂载开始之前被调用，相关的 render 函数首次被调用
mounted	实例被挂载之后调用，DOM可访问
beforeUpdate	数据更新后，DOM重新渲染之前被调用
updated	数据更新导致的虚拟DOM重新渲染和打补丁之后调用
beforeDestroy	实例销毁之前调用，实例仍然完全可用
destroyed	实例销毁后调用，所有绑定的事件监听器被移除，所有子实例也被销毁

其中，我们常常在发送请求的生命周期是created、beforeMount、mounted。他们请求时机的主要区别在于：

created

created钩子在实例创建完成后立即调用，此时组件的状态已经初始化，但DOM还未挂载。适合在此阶段发送网络请求，因为不会影响用户界面，且可以确保数据在组件渲染之前就已经准备好。

beforeMount

beforeMount钩子在挂载开始之前被调用，此时模板已经编译完成，但还未挂载到DOM上。与created类似，此阶段发送请求不会阻塞页面渲染，但由于请求时间较晚，可能会导致数据加载稍有延迟。

mounted

mounted钩子在DOM挂载完成后调用，适合需要操作DOM或在请求数据时需要确保DOM已经渲染的场景。虽然此时发送请求会导致数据加载的时间稍微推迟，但可以保证DOM已经可用。

2. 在父子组件发送网络请求有什么区别

如果涉及到父子组件，他们的生命周期执行时机或父子组件应该在什么阶段发送请求获取数据好呢在Vue2中，父组件和子组件的生命周期钩子函数调用顺序如下：

1. 父组件的beforeCreate
2. 父组件的created
3. 父组件的beforeMount
4. 子组件的beforeCreate
5. 子组件的created
6. 子组件的beforeMount
7. 子组件的mounted
8. 父组件的mounted

父子组件中，组件生命周期的加载顺序是：先执行父的前3个生命周期，再执行子的前4个生命周期，再执行父组件的mounted生命周期。

如果你想让父的请求优先执行，beforeMount就放created或beforeMount中进行请求；如果想让子的请求先执行，父的请求就放mounted中，子的请求放在created、mounted都可以。

这种方式可以控制请求的先后顺序，并不保证谁的请求先成功。