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

Yumenokanata 发布于2019-08-23 10:41 / 3188人阅读

摘要：结论父子组件生命周期钩子的执行顺序遵循从外到内，然后再从内到外，不管嵌套几层深，也遵循这个规律。组件化的设计思路大抵相同，中父子组件生命周期钩子执行顺序，具体没做探究，但是值得一提的是父组件的也是晚于子组件执行的。

如今前端框架都流行组件化，页面元素都可以使用组件进行高度概括，那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系，才能让代码按照我们与预料方式工作。最近参与了一个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属性的方式来更新回显呢？这种方法有待于探究。

云服务器 GPU云服务器 vue父子组件通讯在产品生命周期中 ECS生命周期中的稳定状态父子组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96586.html

vue生命周期

摘要：接触两个月了，今天说一说里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是里边可以操作属性，你记住就完事了，于是乎。。。接触Vue两个月了，今天说一说vue里边很重要的生命周期，记得最开始接触的时候我问了一下周边的同事，这些生命周期都有什么用，得到的答案是mounted里边可以操作属性，你记住mounted就完事了，于是乎。。。数据...

godlong_X 2019-08-23 18:38 评论0 收藏0
[vuejs 踩坑实战系列] 路由场景下父子组件的生命周期顺序来个刨根问底

摘要：大家中秋假期快乐，假期分享一些原理设计文章给大家原创不易，欢迎转发，一起学习凌晨写的，不容易哈，收藏或者点个赞吧在常见的单页应用中，我们都会有一个根文件，里面放置一个然后配置路由来切换很多人在子父组件嵌套关系下的生命周期钩子函数如何应用，大家中秋假期快乐，假期分享一些原理设计文章给大家原创不易，欢迎转发，一起学习(凌晨写的，不容易哈，收藏或者点个赞吧) 在常见的单页应用中，我们都...

FreeZinG 2019-08-26 12:21 评论0 收藏0
vue的生命周期解析并通过表单理解MVVM（不仅理论，图文并茂）

摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。开始前说一说吐槽首先，文章有谬误的地方，请评论，我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...

silvertheo 2019-08-22 14:56 评论0 收藏0
Vue 生命周期详解

摘要：的钩子函数会在组件停用时被调用。是在构造函数中的声明的变量执行钩子函数执行执行钩子函数执行钩子函数刷新前根据对中的进行排序。 Vue 生命周期详解 Vue 生命周期流程最开始，用户使用 new Vue() 创建根 Vue 实例，或者 Vue 实例化子组件都会调用_init方法（我们将这两种实例都称为vm）： function Vue(options) { //Vue 构...

snowLu 2019-08-26 10:59 评论0 收藏0