React/Vue 钩子调用顺序及底层设计

调用顺序

以Vue为列子（React钩子顺序类似）：

1. 加载渲染过程：

• 父组件的beforeCreate钩子函数。
• 父组件的created钩子函数。
• 父组件的beforeMount钩子函数。
• 子组件的beforeCreate钩子函数。
• 子组件的created钩子函数。
• 子组件的beforeMount钩子函数。
• 子组件的mounted钩子函数。
• 父组件的mounted钩子函数。

2. 更新过程：

• 父组件的beforeUpdate钩子函数。
• 子组件的beforeUpdate钩子函数。
• 子组件的updated钩子函数。
• 父组件的updated钩子函数。

这个执行顺序是为了确保组件的初始化和更新能够按照正确的顺序进行。在加载渲染过程中，父组件会在子组件之前完成创建和挂载的过程。在更新过程中，父组件会在子组件之前完成更新的过程。

底层设计

Vue和React在挂载和更新阶段的 真实执行顺序都是从父到子去执行，即父组件完全挂载完，才会轮到子组件挂载，更新过程真实执行顺序也是父组件先完全更新完才会 子组件更新；

但是为什么Mounted和Updated钩子函数调用顺序和这个执行逻辑不一样呢？

思考：比如有3个组件父、子1、子2； 目前mounted钩子触发顺序是 子1——> 子2——>父 ；如果按照真实的挂载顺序来调用回调钩子，变成 父——> 子1——>子2 会怎么样呢？
解释：如果按照真实的挂载顺序来调用，那么在父组件Mounted的时候，子组件此时还没有挂载完成，此时在父组件的Mounted钩子中拿不到子组件最新的状态；Update过程也是同理；那么就失去了Mounted和Updated回调钩子的意义！

总结：这样的顺序可以保证在子组件的生命周期钩子函数中，父组件已经完成了必要的准备工作，子组件可以正确地获取到父组件的数据和DOM元素。最晚完成的最早触发完成的回调，保证了所有Mounted和Updated回调能拿到准确数据！！！