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属性的体式格局来更新回显呢？这类要领有待于探讨。