专栏首页做工程师不做码农面试:Vue.js嵌套组件生命周期执行顺序是什么?

面试:Vue.js嵌套组件生命周期执行顺序是什么?

一次面试被问到的问题,第一次还确实有点懵逼,特此记录下来。

有组件A,组件B,组件C,组件C是组件B的子组件,组件B又是组件A的子组件,那么直观的层级结构如下:

ComponentA
--ComponentB
----ComponentC

问:他们之间生命周期函数的调用顺序是什么?

下面的代码表示上述结构,全局注册了三个组件Comp、childrenA 和 childrenB。在 childrenA 中引用 childrenB,在 Comp 中 引用 childrenA。

Vue.component('comp', {
    template: '<div><children-a></children-a></div>',
    beforeCreate() {
        console.log('Comp beforeCreate')
    },
    created() {
        console.log('Comp created')
    },
    beforeMount() {
        console.log('Comp beforeMount')
    },
    mounted() {
        console.log('Comp mounted')
    },
})
Vue.component('childrenA', {
    template: '<div><children-b></children-b></div>',
    beforeCreate() {
        console.log('--childrenA beforeCreate')
    },
    created() {
        console.log('--childrenA created')
    },
    beforeMount() {
        console.log('--childrenA beforeMount')
    },
    mounted() {
        console.log('--childrenA mounted')
    },
})
Vue.component('childrenB', {
    template: '<div>{{text}}</div>',
    data() {
        return {
            text: 'childrenB'
        }
    },
    beforeCreate() {
        console.log('----childrenB beforeCreate')
    },
    created() {
        console.log('----childrenB created')
    },
    beforeMount() {
        console.log('----childrenB beforeMount')
    },
    mounted() {
        console.log('----childrenB mounted')
    },
})
new Vue({
    el: '#app'
})

输出结果如下:

Comp beforeCreate
Comp created
Comp beforeMount
--childrenA beforeCreate
--childrenA created
--childrenA beforeMount
----childrenB beforeCreate
----childrenB created
----childrenB beforeMount
----childrenB mounted
--childrenA mounted
Comp mounted

可以看到,先执行父级的beforeCreate、created 和 beforeMount,然后再去执行子组件的beforeCreate、created 和 beforeMount,如果子组件下面没有子组件了,就执行 mounted,然后再返回父级执行 mounted。

整个过程用图表示如下:

Vue嵌套组件生命周期执行顺序

完!


本文代表个人观点,内容仅供参考。若有不恰当之处,望不吝赐教!

如果对你有一点点帮助,可以点个关注。

本文链接:https://zhangbing.site/2018/12/05/Vue-js嵌套组件生命周期执行顺序/

作者简介:做工程不做码农(微信公众号同名),Web前端工程师,7年开发经验,坐标杭州,聚焦大前端技术和技术成长的公众号,分享我的原创或精选文章,欢迎关注。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

相关文章

  • Spring IOC(依赖注入、控制反转)概念理解

    用了Spring之后, Spring容器会负责把被依赖的B组件注入到A组件中,A只要被动地等待即可。

    Dunizb
  • 【快速复习】Node.js中的fs模块的使用

    JavaScript 的是没有操作文件的能力,但是 Node 是可以做到的,Node 提供了操作文件系统模块,是 Node 中使用非常重要和高频的模块,是绝对要...

    Dunizb
  • Vue.js动态组件解析

    什么是动态组件绑定?简单的说,就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。

    Dunizb
  • 前端技术前沿3

    wepy中的生命周期 onLoad,onReady,onShow,onPrefetch等,其中onReady,onShow,onPrefetch只有wepy....

    达达前端
  • 【译】《Understanding ECMAScript6》- 第一章-基础知识(一)

    目录: 更好的Unicode编码支持 codePointAt()函数 String.fromCodePoint() 用转义序列对Non-BMP字符编码 nor...

    寒月十八
  • redo日志文件学习(22天)

    关于redo日志文件,今天因为要做redo日志的在线迁移,所以特意做了个简单的总结。 1. 如果要把redo的切换信息显示到alert日志中,需要设置个参数。...

    jeanron100
  • 机器学习 - 交叉熵Cross Entropy

    假设训练数据 D={(x1,y1),(x2,y2),...,(xn,yn)}D={(x1,y1),(x2,y2),...,(xn,yn)}D = \{(x_1,...

    AIHGF
  • 每个程序员都应该收藏的算法复杂度速查表

    这篇文章覆盖了计算机科学里面常见算法的时间和空间的大 O(Big-O)复杂度。我之前在参加面试前,经常需要花费很多时间从互联网上查找各种搜索和排序算法的优劣,以...

    哲洛不闹
  • 每个程序员都应该收藏的算法复杂度速查表

    算法复杂度这件事 这篇文章覆盖了计算机科学里面常见算法的时间和空间的大 O(Big-O)复杂度。我之前在参加面试前,经常需要花费很多时间从互联网上查找各种搜索和...

    用户1667431
  • Vue生命周期

    这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> ...

    蓓蕾心晴

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动