Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#eNqVUktu4zAMvQqhTRIgkdKZXcYTYDAXKNCi3Xjj2kys1pYMkU5aBLl7KX/SNkEDdGFZJB+fSD4e1L+m0bsW1UollAfb8Dp1ALZufGD4X9qqgE3wNUy06awInkRI/PC1gxW4ydqK4RB9ALmXbIeOaQWHgeM472P9mdGbyyEPmDEW09mYCGAM3JeWoCUsgD3sfXgB6+ChRfil4REhCwh5G4LQV2/AIXNk2Xpn3TYmROBvPdLl3pGvUFd+O50MnY7PTmYjKttnlsHhHm6lU0s4DShpO4S/ayDke1ujb3n0zuFmuVzOZn+uvrKxzlL58cwx/uRIzGnMYjDWTSXVdENPypv1HUqBPR8IHyVGnF0w7+ZoxEjMKU3NVS/Vos4a/UzeiZDdNNMhQKkSFYbhK6ks2qkqmRtaGUObPJb7TNqHrZGbDq1jaVgj1Yun4PeEQYhTNQoYOYw4dxgWokKBAcM1zjPoBe8wl6O0clqws238Zs0u1+eLEv3inZbxUver6B/rl3JS2F1Xb8p0JmOnoOnjn+U7vgMtZSyb

Steps to reproduce

In the App.vue component make the created lifecycle hook asynchronous with an asynchronous call in it. When the parent created lifecycle hook has an asynchronous call, the child component is still created and rendered before the parent's lifecycle hook is finished.

Example of the parent's created lifecycle hook

async created() {
  // This used to work in Vue 2. We are currently transitioning to Vue 3.
  console.log('App.vue created')
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('App.vue finished')
}

Example of the child's created lifecycle hook

created() {
  console.log('Child component created')
  console.log('Child component finished')
}

You will see that the child's logs are output between the parents first and second log.

What is expected?

As in Vue 2, I would expect the child components to not be rendered or created until the parent component is finished with the created lifecycle hook.

What is actually happening?

Before the parent's created lifecycle hook is completed, the child component is being rendered.

System Info

No response

Any additional comments?

No response

When the parent created lifecycle hook has an asynchronous call, the child component is still created and rendered before the parent's lifecycle hook is finished.

Thats how it works, yes. This is not a bug. Its how it works.

As in Vue 2, I would expect the child components to not be rendered or created until the parent component is finished with the created lifecycle hook.

You are mistaken about Vue 2 here, it never worked like that in Vue 2 either.