面试官:Vue中父子组件的创建流程

329 阅读1分钟

父子组件的生命周期

如果一个父组件中包含子组件,那么父、子组件的创建执行顺序会怎么样?由于父组件在beforeMount( )之后,才编译template标签中的内容(包含子组件),创建虚拟DOM树;因此,此时的子组件实例对象才会被创建。而更新与销毁阶段也是一样的。

stateDiagram-v2
父:beforeCreate() --> 父:created()
父:created() --> 父:beforeMount()
父:beforeMount() --> 父:mounted()

父:beforeMount() --> 子:beforeCreate()
子:beforeCreate() --> 子:created()
子:created() --> 子:beforeMount() 
子:beforeMount()  --> 子:mounted() 
子:mounted()   --> 父:mounted()

父:mounted() --> 父:beforUpdate()
 
父:beforUpdate() --> 子:beforUpdate()
子:beforUpdate() --> 子:updated()
子:updated() -->  父:updated()

父:beforUpdate()--> 父:updated()
父:updated()--> 父:beforDestroy()
父:beforDestroy()--> 父:destroyed()

父:beforDestroy()--> 子:beforDestroy()
子:beforDestroy()--> 子:destroyed()
子:destroyed()--> 父:destroyed()