Vue.js component lifecycle for children

I found this article to be especially helpful in explaining the order of parent/child lifecycle hooks execution. This diagram in particular offers a nice summary of the process.

Also have a look at this post by LinusBorg on the vuejs forum.

• beforeCreate() and created() of the parent run first.
• Then the parent’s template is being rendered, which means the child components get created.
• so now the children’s beforeCreate() and created() hooks execute respectively.
• these child components mount to DOM elements, which calls their beforeMount() and mounted() hooks.
• and only then, after the parent’s template has finished, can the parent be mounted to the DOM, so finally the parent’s beforeMount() and mounted() hooks are called.

As the first response give a good view of the creation/mounting process it fails to respond for the destruction process.

here is what happen :

1. app created

// we add the parent

1. parent Created
2. child Created
3. child Mounted
4. parent Mounted

// now we remove the parent :

1. parent ready to unmount
2. child ready to unmount
3. child unMounted
4. parent unMounted

PS : beware that beforeDestroy & destroyed in Vue 2 became beforeUnmounted & unMounted un Vue 3