父子组件的生命周期执行顺序

代码结构:
下面是Father组件,在father组件中引入了 子组件<Son></Son>组件
<template>
<div>
<div>我是父组件</div>
<div>{{father}}</div>
<Son></Son>
</div>
</template>
<script>
import Son from "./son"

分别在Father组件和Son组件的生命周期中去执行打印,是输出以下内容:
Father.vue?de45:21 我是父组件的beforecreated
Father.vue?de45:24 我输父组件的created
Father.vue?de45:33 我是父组件的beforemounted
son.vue?0442:20 我是子组件的beforecreated
son.vue?0442:23 我输子组件的created
son.vue?0442:32 我是子组件的beforemounted
son.vue?0442:35 我是子组件的mounted
Father.vue?de45:36 我是父组件的mounted

总结:
子组件在父组件的beforemounted生命钩子完后才能后就开始实例化自己,并走完自己的整个生命周期
等子组件的生命周期构建完成后挂载到父组件上,父组件的mounted才会执行,所以子组件先父组件完成生命周期。这也就是为什么在只有在mounted中的children属性才能看有子组件值,而不是空数组

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容