Vue中父子组件生命周期执行顺序初探

现在前端框架都流行组件化，页面元素均可以使用组件进行高度归纳，那么处理组件之间的关系就如同处理页面架构同样重要。正确理解组件之间的关系，才能让代码按照咱们与预料方式工做。最近参与了一个Vue.js的项目，在处理父子嵌套组件之间关系时遇到了较大的阻力，虽然问题最后解决了，可是以花费大量时间为代价的，记录在这里，但愿下次不踩一样的坑，能更高效的处理此类问题。

0 问题描述

同react，vue组件也有一套完整的生命周期，不一样阶段有不一样的分工。整体来说常常会用的生命周期钩子有如下几种：

• created
• mounted
• destroy

一般会在这些钩子中处理一些异步请求，最多见的就是发起网络请求调用api获取数据。

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

最近开发中遇到的一个“诡异”的问题，就是因为对父子组件生命周期钩子执行顺序理解不透彻引发的。问题是这样的：有一个组件有由一系列子组件组成，子组件又被分解成组件，这样下来就构成了三级组件。需求是在组件显示在页面上以后，再将数据初始化进行回显。父组件获取数据后传递到子组件，要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢？。

个人作法是这样的：最高层父组件的mounted中发起请求获取数据，经过vue的响应机制以props的形式传递到子组件，在子组件的mounted中拿到对应的props进行处理。这样作法要求父组件的mounted时机先于子组件的mounted,但事实是这样吗？显然不是。

这样致使的问题就是，数据没法正确的回显。

1 探究

探究的方法是：写一个有父子嵌套关系的组件，分别在他们的钩子函数中打印日志，观察执行顺序。获得的结果如图所示，父组件先建立，而后子组件建立；子组件先挂载，而后父组件挂载。

子组件挂载完成后，父组件还未挂载。因此组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。

仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，因此回显场景的解决方案是：在created中发起请求获取数据，依次在子组件的created中会接收到这个数据。

2 结论

Vue父子组件生命周期钩子的执行顺序遵循：从外到内，而后再从内到外，无论嵌套几层深，也遵循这个规律。

组件化的设计思路大抵相同，React中父子组件生命周期钩子执行顺序，具体没作探究，可是值得一提的是react父组件的componentDidMount也是晚于子组件componentDidMount执行的。

3 其余

关于回显，问题在于如何在子组件中知道远程数据回来了，而且经过对远程数据的加工处理，最终造成正确的回显。处理按照钩子的顺序获取数据，在vue中还有一个特性watch，是否能够经过watch属性的方式来更新回显呢？这种方法有待于探究。