The triggering sequence of the lifecycle is not intuitive and the document does not specify it specifically

[guda-art]

Vue version

3.5.x

Link to minimal reproduction

https://play.vuejs.org/#eNp9Uk1v2zAM/SuCLnaBwF4a7OLZ2dahh+3QFVt7E1CkNu2qkSVBH2mKwP+9lNy4SdH0kph875GPInf0p9bZxgMtaGlrw7UjFpzXSyZ5r5VxZGegHUhrVE8SJCYT8Ev1+jWf5SEIdZJvTDJZK2kd4Q2pCKrT+VlIlvnYAEtj4KDXYuUAI0LKe++ckuRHLXi9rhjlTVVV8+/4d17gz5zRZYRI/bCSHWDpMh81oz56KdbwHLWMElSRHLEynxrRGXUWnbW8yx6tkjjyLogZrVHNBZi/2nF0zmhBIhKwlRDq6U/MOeNhts/XD1CvP8g/2m3IMXptwILZAKMT5lamAzfCl/+vYIvfE9irxgtkfwL+A6uEDx5H2oWXDdo+4EW3v+N+uOxu7OXWgbT7oYLRwBwin1HcV3i4U6O/2V1ki6hjcsBX3O/6k5shSt7KXnnpoJlhcAGtMvCaIofndHAv2iht8WQaaLmE6xCl0QxvCnLl+3scVQ7xloJACciE6tIkNk9mUZ7xJhLetUzTs2o5TnYkfUc7KjJ2OhjkdJGJ8kGBk2d/fJp3GzBhUfioi+xrdv6FDi+HPzsa

Steps to reproduce

see the console

What is expected?

I guess it's because 'onunmouted' unloads responsive data, but it should be explained in the documentation, otherwise it doesn't follow the logic of deleting first and adding later

What is actually happening?

the new component setup will trigger in between the old component onBeforeUnmount and onUnmounted

System Info

Any additional comments?

No response

[linzhe141]

It is similar to this issue
#12460

The root cause
#12482 (comment)

[edison1105]

This is because the onUnmounted hook of the old component instance is executed asynchronously, designed specifically to avoid blocking the mounting of the new component instance.