位置: IT常识 - 正文
Vue父子组件生命周期执行顺序是什么？(vue父子组件生命周期钩子执行顺序)
编辑：rootadmin推荐整理分享Vue父子组件生命周期执行顺序是什么？(vue父子组件生命周期钩子执行顺序)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue父子组件生命周期执行顺序activated,vue父子组件生命周期钩子函数执行顺序,vue父子组件生命周期钩子执行顺序,vue父子组件生命周期执行顺序的原理,vue父子组件生命周期函数,vue父子组件生命周期执行顺序,vue父子组件生命周期执行顺序,vue父子组件生命周期执行顺序,内容如对您有帮助，希望把文章链接给更多的朋友！
执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。
在单一组件中，钩子的执行顺序是beforeCreate-> created -> mounted->… ->destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?
父子组件生命周期执行顺序组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。
仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，所以父子组件传递接口数据的解决方案是：
在created中发起请求获取数据，依次在子组件的created或者mounted中会接收到这个数据。
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed常用钩子简易版
父create->子created->子mounted->父mounted补充单一组件钩子执行顺序activated, deactivated 是组件keep-alive时独有的钩子
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
总结beforeCreate执行时：data和el均未初始化，值为undefined
created执行时：Vue 实例观察的数据对象data已经配置好，已经可以得到data的值，但Vue 实例使用的根 DOM 元素el还未初始化
beforeMount执行时：data和el均已经初始化，但此时el并没有渲染进数据，el的值为“虚拟”的元素节点
mounted执行时：此时el已经渲染完成并挂载到实例上
beforeUpdate和updated触发时，el中的数据都已经渲染完成，但只有updated钩子被调用时候，组件dom才被更新。
在created钩子中可以对data数据进行操作，这个时候可以进行数据请求将返回的数据赋给data
在mounted钩子对挂载的dom进行操作，此时，DOM已经被渲染到页面上。
虽然updated函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用computed或watch函数来监听属性的变化，并做一些其他的操作。
所有的生命周期钩子自动绑定 this 上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())，会导致this指向父级。
在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子触发。
父子组件的钩子并不会等待请求返回，请求是异步的，VUE设计也不能因为请求没有响应而不执行后面的钩子。所以，我们必须通过v-if来控制子组件钩子的执行时机.
注意：在父组件传递接口的数据给子组件时，一定要在子组件标签上加上v-if="传递的接口数据"
在父组件的created中发请求获取数据，通过prop传递给子组件。子组件在created或者mounted中拿父组件传递过来的数据 这样处理是有问题的。在父组件调用接口传递数据给子组件时，接口响应显然是异步的。这会导致无论你在父组件哪个钩子发请求，在子组件哪个钩子接收数据。都是取不到的。当子组件的mounted都执行完之后，此时可能父组件的请求才返回数据。会导致，从父组件传递给子组件的数据是undefined。
解决方法1：在渲染子组件的时候加上一个条件，data1是父组件调用接口返回的数据。当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。最后执行父组件的mounted。
<div class="test"><children v-if="data1" :data="data1" ></children></div>解决方法2：在子组件中 watch 监听，父组件获取到值，这个值就会变化，自然是可以监听到的
watch:{data:{deep:true,handler:function(newVal,oldVal) {this.$nextTick(() => {this.data = newValthis.data = newVal.url ? newVal.url : ''})}},}从父组件点击调用接口并显示子组件，子组件拿到数据并监听在watch中调用方法并显示。
以下为子组件，data1是从子组件传递过来的数据。在created，mounted中都拿不到父组件调用接口返回的data1。 只能watch监听data1。并调用方法渲染子组件。
props:['data1'],watch:{data1:{deep:true,handler:function(newVal,oldVal) {this.$nextTick(() => {this.data1 = newValthis.showData1(this.data1)})}},}下一篇：【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）(javascript bom dom)
