Vue Parent-Child Component Lifecycle Order

Loading and Rendering Process

Parent beforeCreate -> Parent created -> Parent beforeMount -> Child beforeCreate -> Child created -> Child beforeMount -> Child mounted -> Parent mounted

The parent component executes up to beforeMount first, then the child component hooks execute through mounting, and finally the parent component mounts.

Child Component Update Process

Parent beforeUpdate -> Child beforeUpdate -> Child updated -> Parent updated

Parent Component Update Process

Parent beforeUpdate -> Parent updated

Destruction Process

Parent beforeDestroy -> Child beforeDestroy -> Child destroyed -> Parent destroyed