当父子组件在加载的时候,执行的先后顺序为:

父beforecreate  ->  父created  ->  父beforeMount  ->  子beforeCreate -> 子created  ->  子beforeMount  ->  子mounted  ->  父mounted

为了直观展示查看效果,创建一个父组件,在创建一个子组件,把生命周期钩子函数都打印一下即可。

打印结果为: 

打印结果

1. 当父组件执行完 beforeMount 挂载开始后,会依次执行子组件中的钩子,直到全部子组件mounted挂载到实例上,父组件才会进入mounted钩子 

2. 子级触发事件,会先触发父级beforeUpdate钩子,再去触发子级beforeUpdate钩子,下面又是先执行子级updated钩子,后执行父级updated钩子

总结:

        父组件先于子组件 created, 而子组件先于父组件mounted

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐