Order of lifecycle hooks for parent and child

#1

Hi,

It seems lifecycle hooks of children gets executed before the hooks of parent why is so, is this intended behaviour.

I have seen For example: mounted in a child components gets executed first and beforeCreate in parent component gets executed later.

#2

There’s nothing weird or wrong about it, it all follows from the lifecylce logically.

  • 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 respecitvely.
  • 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.

END

8 Likes
#4

I would like to expand on the OP… They mention that they’ve seen a child’s mounted hook be executed before a parents’ created. From your explanation, that isn’t what should happen.

I too have seen this strange behaviour. I have a created hook in 2 components, one is a grand-parent, you could say, of the other. However the grand-child components’ created hook gets called before the grand parents.

Again, from your description, this shouldn’t be the expected behaviour

1 Like
#5

I would create a new thread with an example fiddle of your description, instead of resurrecting an old thread. It would be interesting to see what you are saying in action.

#6