Vue中父子组件生命周期执行顺序小结

在单一组件中，钩子的执行顺序是beforeCreate-> created -> mounted->… ->destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?

组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。

父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted ->
父mounted

自组件挂载完成后，父组件还没有挂载，所以在组件数据更新视图时，父组件mounted里面获取的api数据，子组件的mounted是拿不到的是拿不到的。

仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，所以父子组件传递接口数据的解决方案是：

在父组件created中发起请求获取数据，依次在子组件的created或者mounted中会接收到这个数据。

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

复制代码更新过程

父beforeUpdate->子beforeUpdate->子updated->父update